Vue 过渡（动画）transition组件案例详解
更新时间：2017年01月22日 09:25:31 作者：github_26672553
这篇文章主要介绍了Vue 过渡（动画）transition组件案例详解，非常不错，具有参考借鉴价值，需要的朋友参考下
Vue过度(动画)，本质走的是CSS3：transtion，animation。
控制器div显示/隐藏，代码如下：
<div id="box">
<input type="button" value="按钮" @click="toggle">
<div id="div1" v-show="isShow"></div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
isShow:false
},
methods:{
toggle(){
this.isShow = !this.isShow;
}
}
});
</script>
我们已经实现了对div的显示/隐藏，但是没有过渡（动画）效果。
1.单元素/组件的过渡
Vue提供了transition的封装组件，在下列情况中，可以给任何元素和组件添加”进入”和”离开”过渡动画。
条件渲染 （使用 v-if）
条件展示 （使用 v-show）
动态组件
组件根节点
改造：
<div id="box">
<input type="button" value="按钮" @click="toggle">
<transition name="fade">
<div id="div1" v-show="isShow" transiton="fade"></div>
</transition>
</div>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
其他更多过渡动画方法，请看文档：http://cn.vuejs.org/v2/guide/transitions.html
以上所述是小编给大家介绍的Vue 过渡（动画）transition组件案例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家详细介绍了vue项目实现登陆注册效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
本篇文章主要介绍了浅谈vue项目可以从哪些方面进行优化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
有时候 vue 无法监听到数据的变化,导致数据变化但是视图没有变化,也就是数据更新了,但在页面上没有显示出来,所以本文给出了三种解决方法,通过代码示例介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了Vue中关于重新渲染组件的方法及总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
element ui时间日期选择器el-date-picker报错Prop being mutated:"
在日常开发中,我们会遇到一些情况,限制日期的范围的选择,下面这篇文章主要给大家介绍了关于element ui时间日期选择器el-date-picker报错Prop being mutated: "placement"的解决方式,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue+iview/elementUi实现城市多选，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
vue3结合typescript中使用class封装axios
这篇文章主要为大家介绍了vue3结合typescript中使用class封装axios实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
Vue实现hash模式网址方式(就是那种带#的网址、井号url)
这篇文章主要介绍了Vue实现hash模式网址方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了Vue项目如何实现切换主题色思路，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
本文讨论了watch函数是如何利用副作用函数和options进行封装实现的，也通过调度函数去控制回调函数的立即执行和执行时机，还可以解决竞态问题，感兴趣的可以了解一下2022-04-04
最新评论