Question

我有这段简短的代码，淡出了我的导航栏。一切都很好。

可见部分：

.navigation-visible {
    position: fixed;
    top: 0;
    left: 0;
    background: blue;

   -webkit-opacity: 1;
   -moz-opacity: 1;
    opacity: 1;
}

隐藏的部分：

.navigation-not-visible {
    position: fixed;
    top: 0;
    left: 0;
    background: blue;

   -webkit-opacity: 0;
   -moz-opacity: 0;
    opacity: 0;
   -webkit-transition: all 800ms ease;
   -moz-transition: all 800ms ease;
   -ms-transition: all 800ms ease;
   -o-transition: all 800ms ease;
   transition: all 800ms ease;
}

我现在要做的是添加另一个动画，在导航栏-100px被淡出后直接将其移动到顶部。

所以我尝试了这段代码，但当然我失败了。

-webkit-transition: all 800ms ease, position translateY(-100%);

最大的问题：我在这里做错了什么？

Answer 1

根据您所需的浏览器支持，您可以使用CSS3动画。这也需要一些JavaScript，但我假设您在更改类名时已经使用了JavaScript？

<div class="navigation-not-visible" id="navigation" style="display:none;">
  Navigation  ;)
</div>

<div id="quadraflunk"><br/>Smile and click me</div>

<style type="text/css">

  .navigation-visible {
    position: fixed;
    top: 0;
    left: 0;
    background: blue;

    opacity: 1;
  }

  .navigation-not-visible {
    position: fixed;
    top: -100%;
    left: 0;
    background: blue;

    opacity: 0.2;
   -webkit-transition: all 800ms ease;
   -moz-transition: all 800ms ease;
   -ms-transition: all 800ms ease;
   -o-transition: all 800ms ease;
   transition: all 800ms ease;
    animation-name: example;
    animation-duration: 800ms;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 800ms; /* Chrome, Safari, Opera */
  }

  @keyframes example {
    0%   {opacity: 1;top:0;}
    99%  {opacity: 0;top:0;}
    100% {top: -100%;}
  }
  @-webkit-keyframes example {
    0%   {opacity: 1;top:0;}
    99%  {opacity: 0;top:0;}
    100% {top: -100%;}
  }
</style>

<script type="text/javascript">
  document.getElementById("quadraflunk").onclick = function() {
    if (document.getElementById("navigation").className == "navigation-visible") {
      document.getElementById("navigation").className = "navigation-not-visible";
    }
    else {
      document.getElementById("navigation").style.display = "";
      document.getElementById("navigation").className = "navigation-visible";
    }
  }
</script>

这是一个小小的演示：https://jsfiddle.net/bruwpaaz/

Answer 2

transition: opacity 800ms ease, transform 1s ease;
transition-delay: 0s, 800ms;
transform: translateY(-100px);

由于元素首先褪色，你将看不到变换，但你明白了。

元素上的多个CSS动画

2 个答案: