Question

我在preloader div中有一个徽标，我希望在通话后淡出。徽标确实淡出，但在它完全消失后变得可见。我想要的是让它逐渐淡出或者只使用CSS显示它，如果可能的话我可以使用jquery而不是。

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

Css动画

{{1}}

Answer 1

尝试使用css过渡而不是动画：

&.preloader-remove {
    position: relative;
    top: 50px;
    opacity: 0;
    -webkit-transition: top 1s, opacity 1s;
    transition: top 1s, opacity 1s;
}

Answer 2

来自jquery api：http://api.jquery.com/fadeout/

.fadeOut（）描述：通过将匹配的元素淡化为透明来隐藏它们。

$( "#clickme" ).click(function() {
  $( "#book" ).fadeOut( "slow", function() {
    // Animation complete.
  });
});

淡出后保持隐藏状态

2 个答案: