详解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中添加过渡效果 的全部内容, 来源链接: utcz.com/z/337120.html

回到顶部