首页 > 其他分享 >Vue封装的过度与动画

Vue封装的过度与动画

时间:2023-03-13 23:45:01浏览次数:42  
标签:动画 Vue 封装 样式 元素 leave 过度 enter

1、作用:在插入、更新或移除DOM元素时,在合适的时候给元素添加样式类名。

2、图示

 

 3、写法:

(1)准备好样式:

元素进入的样式:

  v-enter:进入的起点

  v-enter-active:进入过程中

  v-enter-to:进入的终点

元素离开的样式:

  v-leave:离开的起点

  v-leave-active:离开过程中

  v-leave-to:离开的终点

(2)使用<transition>包裹要过度的元素,并配置name属性

<transition name="hello">
      <h1 v-show="isShow">你好啊~</h1>
</transition-group>

(3)若有多个元素需要过度,则需要使用:<transition-group>,且每个元素都要指定key值

(4)推荐使用动画库:animate.css

过度:

 

 动画:

 

标签:动画,Vue,封装,样式,元素,leave,过度,enter
From: https://www.cnblogs.com/technicist/p/17213395.html

相关文章