动画

//css
.v-enter,
.v-leave {
opacity:0;
transition:translateX(100px);
}

.v-enter-active,
.v-leave-active {
transition:all 0.4s easa;
}

//html
<transition><h1></h1></transition>

  • 如果不想公用一个效果 可以自定义v-前缀

  • animate.css 第三方类库 animated + 效果名

  • :duration="200" 可以设置入场立场到毫秒值

在实现过渡时，如果需要过渡的元素 是通过v-for渲染的 ，只能通过
<transitionGroup appear tag="ul"></transitionGroup>
appear 入场效果
tag=" " 来指定要渲染什么元素

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容