Question

我有一个CSS动画代码，使对象从下到上（滚动时）出现动画。这是代码，

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

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

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

如何重新格式化此CSS代码来做相反的事情？

1 个答案: