vue 动画效果1

要点：

 

 

然后还可以实现当一开始出场就进行一次来的动画

 

 

 

 最好写上name,因为如果一个组件中有两个动画,如果不写的话将就会都会去找v-enter-active或者

v-leave-active,当需要两个不同的动画时,就不能实现,所以最好加上name

 

实现效果点下一往又一推隐藏,再点下又回来

 

 而这边写的动画不需要写两个只需要写一个因为比如你写了一个推出来的,反着播放就是推进去的

先把样式准备好

 

css3写动画

 

 使用vue写动画

要进行动画的元素要在外面加上transition标签

 但是动画的样式名也需要改变

 

如果给transition标签增加name属性,则样式的v要改成name

 

 

 如果不加name的话,就是默认v

然后还可以实现当一开始出场就进行一次来的动画

但是如果这样写的话,会报类型错误毕竟这么些是给appear属性赋值为一个为true的字符串

 

 所以要么:appear这样“”里面就变成了表达式了可以读到布尔值true

 

直接加上也可以

 

vue会自动给你加样式,而且发现你加的transition会自动脱掉跟template一样