如何重新格式化这个 css 代码来做相反的事情？

【问题标题】：how to reformat this css code to do its opposite?如何重新格式化这个 css 代码来做相反的事情？
【发布时间】：2019-01-30 04:07:34
【问题描述】：

我有一个 css 动画代码，它使对象动画显示为从下到上（滚动时）。这是代码，

 .animate-in-down {
  transition: all 1.3s ease-out;
    position:relative;
  opacity:1;
  top:0px;
  &.out-of-viewport {
    top:40px;
    opacity:0;
  }
}

我希望这段代码做与现在相反的事情。这意味着它应该从上到下。请帮忙。

【问题讨论】：

我不太确定您现在正在经历什么以及您正在尝试做什么。你能附上更多的上下文和一个 jsfiddle 或 codepen 现在它是如何工作的以及你的期望吗？

标签： css animation css-animations

【解决方案1】：

这是您尝试的最简单的形式。

关键点：

您不需要在CSS 中声明开始转换状态，例如opacity: 1。它是隐含的，包含在内是多余的。
不要使用top 进行过渡/动画处理，而是使用transform，因为它将提供更好的性能（尤其是对于较弱的移动设备）(Details)。

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('.box').classList.toggle('hide');
});

.box {
  height: 100px;
  width: 100px;
  background-color: red;
  transition-duration: .5s;
  transition-property: opacity, transform;
  transition-timing-function: ease-in-out;
}

.box.hide {
  opacity: 0;
  transform: translateY(-300px);
}

<div class="box"></div>
<button>Toggle</button>

https://jsfiddle.net/wrds8gf5/

【讨论】：