当前位置：首页 > 资讯 > 技术文档

详解Vue中添加过渡效果

时间：2022-05-14 15:14 编辑：来源：阅读：
扫一扫，手机访问

摘要：详解Vue中添加过渡效果

最近在学习Vue这个框架，发现新的版本中，官网的文档里面说的过渡效果，如果直接粘贴官方的例子中的代码，发现并没有过渡的效果，经过反复测试之后终于知道怎么搞了，把测试的过程总结一下，以便以后回顾。贴上成功的代码： html:

<div v-if="show" :transition="expand">hello</div>
//或者
<div v-if="show" v-bind:transition="expand">hello</div>

css:

/* 必需 */
.expand-transition {
 transition: all .3s ease;
 height: 30px;
 padding: 10px;
 background-color: #eee;
 overflow: hidden;
}

/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
.expand-enter, .expand-leave {
 height: 0;
 padding: 0 10px;
 opacity: 0;
}

js:

new Vue({
 el: '#app',
 data: {
  show: false,
  transitionName: 'expand'
 }
})

效果如下： [img]http://files.jb51.net/file_images/article/201703/2017320141631050.png?2017220141756[/img] [img]http://files.jb51.net/file_images/article/201703/2017320141709740.png?2017220141743[/img] 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：Vue.js用法详解
下一篇：vue组件 $children,$refs，$parent的使用详解

资讯排行榜
更多>>