Vue官方的fade动画源代码如下
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
<script>
new Vue({
el: '#demo',
data: {
show: true
}
})
</script>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to
/* .fade-leave-active below version 2.1.8 */
{
opacity: 0;
}
</style>
但是当你安装了And design vue后,会悲催的发现,冲突了,fade in和out动画都没了。原因是ADV里的css中,有一个class把transition动画给写冲突了。解决方式是在页面上添加以下CSS:
.fade-enter.fade-enter-active,
.fade-appear.fade-appear-active {
-webkit-animation-name: none;
animation-name: none;
}
.fade-leave.fade-leave-active {
-webkit-animation-name: none;
animation-name: none;
}
鼓捣了半天,神烦