Vue 中通用的 css 列表入场动画效果

 

css 代码 

.gradientAnimation {
  animation-name: gradient;
  animation-duration: 0.85s;
  animation-fill-mode: forwards;
  opacity: 0;
}




/* 不带前缀的放到最后 */
@keyframes gradient {
  0% {
    opacity: 0;
    transform: translate(-100px, 0px);
  }

  100% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}

封装的列表组件，我是直接循环列表组件的，并且加了一个index 属性

直接传递给子组件的第一个 元素上

 

这样就能实现列表一项接一项进入的效果动画了