您的位置:首页 > 产品设计 > UI/UE

vue过渡动画

2017-10-11 17:36 531 查看
vue1:



css:

.fade-transition {
transition: all .5s ease;
opacity: 1;
}
.fade-enter,
.fade-leave {
opacity: 0;
}

js:

<div class="czk-model" @touchmove.prevent v-if="czkModel.show" transition="fade">


注意:入场和出场后需要修改的样式属性必须在fade-transition里面设置,否则无效

vue2:

css:

.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
opacity: 0
}

js:

<transition name="fade">
<p v-if="show">hello</p>
</transition>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: