带有CSS过渡的VueJS中的简单渐变入口

时间:2018-07-02 16:05:10

标签: css vue.js css-transitions css-animations vuejs-transition

看起来很简单,但是我可以使它工作。 将新元素添加到列表中后,我希望其他元素移动以留出新元素的空间,然后新元素必须带有淡入淡出过渡。

我无法制作这个简单的动画。我可以移动其他元素,但是新元素没有任何淡入淡出过渡。它只是出现! BIM。

这是一个codepen:https://codepen.io/MuyBien/pen/OEqNEQ

.fade-enter-active {
  transition: opacity .3s ease-out;
  transition-delay: .3s;
}
.fade-enter {
  opacity: 0;
}
.fade-enter-to {
  opacity: 1;
}
.fade-move {
  transition: transform .3s;
}

1 个答案:

答案 0 :(得分:0)

.fade-enter-active {
  transition: opacity 1s ease-out;
  transition-delay: 1s;
}
.fade-enter {
  opacity: 0;
}
.fade-enter-to {
  opacity: 1;
}
.fade-move {
  transition: transform 1s;
}

您可以延迟输入。