CSS的“all”过渡效果无法正常工作。

Question

我需要帮助我的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-container{margin-top:100vh !important;}
    /*end of full width slider in homepage*/

这里有一个网站链接 --> http://concept1.mystudioengine.site/ 我想做的是希望滚动时，头部导航栏有动画效果。请帮忙，如果有任何建议将不胜感激。

- Harry Mac

---

你不能从 absolute 切换到 fixed。请在帖子中为我们提供一个可工作的演示问题的演示文稿。我们需要一个问题的 [mcve]。 - Michael Coker

我试图复制这个网站的页眉导航动画 http://www.divithemeexamples.com/Star-Cafe-Divi-Child-Theme/ - Harry Mac

Answer 1

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

因此，有一些属性和值是无法进行动画处理的，例如从 top: auto 到 top: 0px。

但是像 top 这样的动画属性并不推荐使用，因为会影响性能。我建议你阅读这篇关于实现60 FPS动画的文章和关于关键渲染路径的文章。

在这种情况下，最好的选择是使用类似以下代码来为您的标题设置固定位置的动画效果：

/*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*/

- Iago Dahlem