淡出后保持隐藏[重复]答案

【问题标题】：Stay hidden after fadeout [duplicate]淡出后保持隐藏[重复]
【发布时间】：2015-09-16 15:17:47
【问题描述】：

我在预加载器 div 中有一个徽标，我想在通话后淡出。徽标会淡出，但在完全淡出后变得可见。我想要的是让它保持淡出或仅在可能的情况下使用 CSS 使其不显示我可以使用 jquery 而不是。

&.preloader-remove{
            -webkit-animation: fadeOutUp 1s;
            animation: fadeOutUp 1s;
        }

Css 动画

@-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长什么样子？
它只是在向上移动时淡出。
我的意思是动画的css。即使您得到了答案，您仍应将其添加到您的问题中，以便其他人可以看到他们是否犯了同样的错误。
啊当然刚刚添加到问题中。

标签： jquery css

【解决方案1】：

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

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

【讨论】：

愚蠢的我，我只需要将不透明度添加到 0...谢谢伙计！

【解决方案2】：

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

.fadeOut() 说明：通过将匹配的元素淡化为透明来隐藏它们。

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

【讨论】：

通过使用这个元素不会向上移动。我使用下面的解决方案修复了它。还是谢谢！