vue元素怎么实现动画过渡效果


今天小编给大家分享一下vue元素怎么实现动画过渡效果的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。1 在 vue 中,使用标签包含着的单个子元素在使用v-showv-if切换显示隐藏前,会先判断是否有对应的class样式能匹配到该子元素上:v-leave 当前元素准备从显示转变成隐藏,在动画开始前添加到元素上,动画一旦开始会立即删除;v-leave-active 在动画过渡过程中,元素一直拥有该样式,直到动画结束则自动删除,用于设置过渡的效果;v-leave-to 在动画过渡过程中,元素一直拥有该样式,直到动画结束则自动删除,用于设置动画最终的效果;事例中,当点击 button,div 并不会马上 display: none, 而是首先设置 v-leave ,下一刻即删除 v-leave ,同时添加 v-leave-active v-leave-to,当 v-leave-active 中的过渡时间执行完成,则删除 v-leave-active v-leave-to,同时添加 display: none。v-enter 当前元素准备从隐藏转变成显示,在动画开始前添加到元素上,动画一旦开始会立即删除;v-enter-active 在动画过渡过程中,元素一直拥有该样式,直到动画结束则自动删除,用于设置过渡的效果;v-enter-to 在动画过渡过程中,元素一直拥有该样式,直到动画结束则自动删除,用于设置动画最终的效果;事例中,当点击 button,div 马上清除 display: none, 然后设置 v-enter ,下一刻即删除 v-enter ,同时添加 v-enter-active v-enter-to,当 v 香港云主机-enter-active 中的过渡时间执行完成,则删除 v-enter-active v-enter-to。2 自定义动画类名:该效果与上一例效果完全一致的,transition元素可以使用name属性来指定使用的类名前缀,从而代替v-字段,例如事例中的name="slide"使本来的v-enter变成了slide-enter3 transition 与 animation 同时使用时事例中,动画同时指定了 transition 和 animation 动画, transition 元素的 type 属性可以指定以哪种动画的时间为元素的结束时间,如果不指定动画监控的方式,则会以最长时间的为准。4 javascript 监听动画一旦使用 js 事件,原 css 动画过渡效果就会无效,官方推荐在 enter 和 leave 事件需手动调用 done 方法,不然事件一直不会调用后续的 after 事件,没有调用 after 事件但是又有其他事件开始了,则被视为动画被 cancel 了。
5 页面初始化时的动画:appear 属性表示开启初始化动画,appear-class 属性指定初始化前的样式,appear-active-class 属性指定初始化动画过程的样式;transition 动画无法在初始化动画中起效,而 animation 动画则可以;before-appear appear after-appear 是事件回调,看事例相当清晰。6 动画元素的 key :show1 为什么没有动画效果呢?因为 vue 会把切换中的两个 button 识别成同一个元素,只是修改了 button 中的不同内容,所以实际上页面并没有发生 DOM 元素的切换;
如果要让 vue 明确识别出这是2个不同的 button 元素,则为每个元素指定不同的 key 属性的值。
7 元素切换的动画模式:
transition 默认是同时执行2个元素的切换动画的,案例中红色的 off 按钮其实是会同时向左移动的,只是因为布局上没有脱离布局流,被 on 按钮顶住,无法移动;mode=”in-out” 可以使切换元素先执行将要显示元素的动画,再执行将要隐藏元素的动画;mode=”out-in” 可以使切换元素先执行将要隐藏元素的动画,再执行将要显示元素的动画;
8 多元素动画:
transition 里面只能放置单个元素或使用 v-if v-show 切换的单个元素,要想使用多个元素的动画,必须使用 transition-group;transition-group 默认会在 DOM 里渲染成 span 标签,可使用 tag=”ul” 指定渲染成其他标签;transition-group 必须为每一个子元素指定 key;8 多元素的位移动画:
transition-group 允许在每个元素移动时,添加 v-move 的样式,移动完成后自动清除该样式;transition 的属性, transition-group 都有,包括 name enter leave;
以上就是“vue元素怎么实现动画过渡效果”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注开发云行业资讯频道。

相关推荐: 如何查看SSD固态硬盘是否4k对齐

这篇文章主要为大家展示了“如何查看SSD固态硬盘是否4k对齐”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何查看SSD固态硬盘是否4k对齐”这篇文章吧。一、首先在电脑桌面上按组合键(Win+R)把运行窗口打开,接…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 07/19 16:16
下一篇 07/19 16:16

相关推荐