CSS“全部”转换不起作用

Posted 2023-03-06

【中文标题】CSS“全部”转换不起作用

【英文标题】：CSS "all" Transition is not working

【发布时间】：2017-08-01 04:59:56

【问题描述】：

我需要帮助我的 css 转换，因为它似乎根本不起作用。这是我的CSS代码。你认为我错过了什么吗？

   /*header navigation in homepage*/
    .home header#main-header 
        position: absolute;
        top: auto !important;
        bottom: 0px !important;
        background: rgba(0, 0, 0, 0.7);
        transition: all 3s ease-in-out;
    
    .home header#main-header.et-fixed-header 
        position: fixed !important;
        top: 0px !important;
        bottom: auto !important;
        transition: all 3s ease-in-out;
    
    /*end of header navigation in homepage*/
    /*full width slider in homepage*/
    .fs
      position:absolute;
      top:0; right:0; bottom:0; left:0;
      z-index: 10;
      background-position:bottom;
      background-size: inherit;
    
    .home #page-containermargin-top:100vh !important;
    /*end of full width slider in homepage*/

哦，这是网站的链接 --> http://concept1.mystudioengine.site/ 我想要做的是标题导航栏应该有滚动动画。请帮忙。任何建议将不胜感激。

【问题讨论】：

您无法从absolute 转换到fixed。请在帖子本身中给我们一个问题的工作演示。我们需要该问题的minimal reproducible example。

我试图复制这个网站的标题导航动画divithemeexamples.com/Star-Cafe-Divi-Child-Theme

【参考方案1】：

首先，在这种情况下使用 all 不是一个好主意，为每个要设置动画的特定属性添加一个过渡。

因此，有些属性和值无法设置动画，例如 top: auto 到 top: 0px。

但是像top这样的动画属性不推荐用于性能问题，我建议你阅读this post about achieving 60 FPS animations和about Critical Rendering Path。

在这种情况下，最好的选择是使用类似这样的方法来为您的标题设置动画：

/*header navigation in homepage*/
.home header#main-header 
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    transform: translateY(-100%);
    transition: transform 3s ease-in-out;

.home header#main-header.et-fixed-header 
    position: fixed;
    transform: translateY(0);

/*end of header navigation in homepage*/