网络编程
位置：首页>> 网络编程>> JavaScript>> 详解Vue中添加过渡效果

详解Vue中添加过渡效果

作者：kevin.l　　发布时间：2024-04-27 16:04:29　

标签：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'
}
})

效果如下：

详解Vue中添加过渡效果详解Vue中添加过渡效果

来源：http://www.cnblogs.com/kevin1220/p/5689868.html

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com