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

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

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

CSS＆＃34;所有＆＃34;过渡不起作用

1 个答案: