详解vue过度效果与动画transition使用示例
先看一个示例
代码如下
<template> <div align="center" style="margin-top: 100px;"> <button @click="show= !show" >测试</button> <transition> <div v-if="show"> <p>这是一段文字</p> </div> </transition> </div> </template> <script> export default { name: 'transitionTest', data () { return { show: true } } } </script> <style scoped> .v-enter-active, .v-leave-active { transition: all .5s ; } .v-enter { transform: translateY(50px); opacity: 0; } .v-leave-active { transform: translateY(50px); opacity: .5; } </style>
包裹了一个div组件,点击按钮实现动画效果。一般搭配v-if、v-show、动态组件、组件根节点来使用。
transition钩子函数
transition提供六个钩子函数,提供给我们在不同时机编写相应的动画效果。以下是此六个钩子函数执行时机
1.v-enter:进入过渡开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。
2.v-enter-active:进入过渡生效时的状态。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
3.v-enter-to:进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。
4.v-leave: 离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
5.v-leave-active:离开过渡生效时的状态。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
6.v-leave-to:离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除
自定义过渡类名
在页面中有多个地方需要进行过渡效果,如果使用vue提供的默认那6个钩子函数,那么所有要过渡地方的过渡效果都是一样的。如果需要在不同的场合定义不同的动画效果,就需要我们自己定义专属于各个过渡效果的类名。解决办法给transition标签添加name属性,在name属性中写入自己的类名前缀。例如,那么在使用类名的时候就是这样的:.my-trans-leave、.my-trans-enter-to。如:
<transition name="my-trans" mode="out-in"> <router-view v-if="!$route.meta.keepAlive"></router-view> </transition>
style写法,my-trans是“.my-trans-enter-active”的前缀
<style> .my-trans-enter-active, .my-trans-leave-active { transition: all .2s; opacity: 1; } .my-trans-enter { transition: all .2s; opacity: 0; } .my-trans-leave-to { transition: all .2s; opacity: 0; } </style>
transition-group使用
对列表进行过渡渲染时,就必须使用transition-group元素包裹。点击列表中内容,按照以下动画移除,示例如下
<template> <div class="main_css"> <transition-group name="slide"> <li v-for="(item,i) in list" :key="item.id" @click="del(i)"> {{ item.id }} --- {{ item.name }} </li> </transition-group> </div> </template> <script> export default { name: 'transitionGroupTest', data () { return { list: [{ id: 1, name: '红烧鱼' }, { id: 2, name: '炒土豆' }, { id: 3, name: '烧茄子' } ] } }, methods: { del (i) { this.list.splice(i, 1) } } } </script> <style scoped> .main_css { margin-left: 50px; margin-top: 50px; } .slide-enter-active { transition: all .5s linear; } .slide-leave-active { transition: all .1s linear; } .slide-enter { transform: translateX(-100%); opacity: 0; } .slide-leave-to { transform: translateX(110%); opacity: 0; } </style>
小结
过度与动画,使用transition标签完成,同时提供6个钩子函数。全局动画在app.vue中,在router-view组件中包裹transition,如:;给transition标签添加name属性定义过渡类名,实现局部变化。
以上就是详解vue过度与动画transition使用示例的详细内容,更多关于vue过度与动画transition的资料请关注猪先飞其它相关文章!
相关文章
- ps动态环绕动画效果是现在很多人都非常喜欢的,大多数人还不知道ps动态环绕动画效果怎么制作下面文章就给大家介绍下ps怎么制作科技感十足的动态环绕动画效果,一起来看看...2017-07-06
- 这篇文章主要介绍了Vue 过渡(动画)transition组件案例详解,非常不错,具有参考借鉴价值,需要的朋友参考下...2017-01-26
- 这篇文章主要介绍了jQuery动画效果相关方法,结合实例形式较为详细的分析了jQuery实现动画效果所用到的常见方法与相关注意事项,需要的朋友可以参考下...2016-01-05
- Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果,Vue 提供了内置的过渡封装组件transition,该组件用于包裹要实现过渡效果的组件...2021-10-10
- 微信小程序目前的火热程度相信不用多言,最近利用空余时间用小程序实现了个动态的登录页效果,所以下面这篇文章主要给大家介绍了利用微信小程序实现登录页云层漂浮动画效果的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。...2017-05-09
- 本文章来为各位介绍一篇利用PS制作“签名”GIF小动画的例子,希望这个制作过程能够帮助到各位朋友,各位进入看看吧。 先给大家看下效果,有兴趣的童鞋→_→可以...2016-09-14
- 这篇文章主要介绍了公众号SVG动画交互实战代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-01
- 这篇文章主要为大家详细介绍了js实现缓动动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-25
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
这篇文章主要介绍了jQuery实现的给图片点赞+1动画效果,并附带在线演示及demo源码下载,涉及jQuery鼠标事件响应及页面元素属性动态操作相关技巧,需要的朋友可以参考下...2016-01-05jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
这篇文章主要介绍了jQuery实现的点赞随机数字显示动画效果,并附带在线演示与demo源码供读者下载.涉及jQuery鼠标事件响应及基于animate动画效果实现技巧,需要的朋友可以参考下...2016-01-05- 这篇文章主要介绍了JS实现点击登录弹出窗口同时背景色渐变动画效果,涉及JavaScript基于鼠标事件及时间函数定时触发形成渐变动画的相关技巧,需要的朋友可以参考下...2016-03-28
Photoshop利用智能对象将人物制作成花海里飘散消失的GIF动画教程
今天小编在这里就来给Photoshop的这一款软件的使用者们来说一说利用智能对象将人物制作成花海里飘散消失的GIF动画的教程,各位想知道具体方法的使用者们,那么大家就快来...2016-09-14详解vue2.0 transition 多个元素嵌套使用过渡
这篇文章主要介绍了详解vue2.0 transition 多个元素嵌套使用过渡,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-06-24- 这篇文章主要介绍了three.js 实现露珠滴落动画效果的示例代码,非常不错,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-03-01
- 这篇文章主要介绍了SwiftUI 中创建反弹动画的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-30
- AngularJS 是一组用于创建单页Web应用的丰富框架,给构建丰富交互地应用带来了所有功能,其中一项主要的特性是Angular对动画的支持。下面通过本文给大家介绍AngularJS中实现显示或隐藏动画效果的方式总结,对angularjs动画效果相关知识感兴趣的朋友一起学习...2016-01-05
- 这篇文章主要为大家详细介绍了Android Studio实现帧动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-11-14
- Android动画背景图自动播放的实现程序,我们在开发android应用的时候,经常会遇到类似从网络加载大图,在加载的过程中,在图片要显示的ImageView位置,先显示一个转圈的loadin...2016-09-20
- 这篇文章主要介绍了Swift使用transform 实现重复平移动画效果,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-07-21
- 本文将为大家收集10个超赞的jQuery图片滑块动画,都是小编精挑细选而来,希望这些现成的jQuery插件将为你节省很多开发时间。...2016-01-26