vue如何使用原生js写动画效果_5分钟学会Vue动画效果(小结)

本文介绍了5分钟学会Vue动画效果(小结)，分享给大家，具体如下：

1.哪些元素/那些组件适合在那些条件下实现动画效果

条件渲染 (使用 v-if)

条件展示 (使用 v-show)

动态组件

组件根节点

简单经典例子：(文字隐藏到显示效果)

show toggle

//fade 自定义名称

hello

.fade-enter-active{

transition: opacity .5s; //类名：隐藏到显示过程所需要的时间

}

.fade-enter { // 类名:初始化状态

opacity: 0;

}

自己画了一个过渡动画生命周期，表示：动画开始，过程，结束，类名生效和失效

隐藏到显示，显示到隐藏过程

css动画

show toggle

//fade 自定义名称

hello

.fade-enter-active { //类名：隐藏到显示过程所需要的时间

animation: bounce-in .5s;

}

.fade-leave-active { //类名：显示到隐藏过程所需要的时间

animation: bounce-in .5s reverse; //reverse