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/cli出现defineConfig is not function错误解决办法
这篇文章主要给大家介绍了关于使用vue/cli出现defineConfig is not function错误的解决办法,当我们在做打包配置的时候,出现了这个错误,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vue3.0中sass全局的使用过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue中的style样式如何动态绑定，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要给大家介绍了关于vue3点击不同的菜单页切换局部页面实现的相关资料,文中示例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考价值,需要的朋友可以参考下2023-08-08
vue3 组合式api中 ref 和$parent 的使用方法
vue3中， 在 组件中添加一个 component ref=“xxx” ，就可以在父组件中得到 子组件的 dom 对象， 以及 虚拟的 dom 对象， 有了虚拟 dom, 我们就可以在父组件中控制子组件的显示了，这篇文章主要介绍了vue3组合式api中ref和$parent的使用,需要的朋友可以参考下2023-09-09
下面小编就为大家分享一篇axios拦截设置和错误处理方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家详细介绍了vue.js实现回到顶部动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
axios是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，下面这篇文章主要给大家介绍了关于vue.js简单配置axios的相关资料，需要的朋友们可以参考借鉴，需要的朋友们下面来一起学习学习吧。2017-12-12
这篇文章主要介绍了Vue+jquery实现表格指定列的文字收缩的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要为大家详细介绍了vue实现手机验证码登录，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
最新评论