-
-
Notifications
You must be signed in to change notification settings - Fork 3.9k
Closed
Labels
Description
- I have searched the issues of this repository and believe that this is not a duplicate.
Version
1.6.5
Environment
vue 2.x
Reproduction link
Steps to reproduce
在main.ts 存在 import 'ant-design-vue/dist/antd.css'; 的时候不显示过渡动画,
切换时直接消失和显示。
去掉 引入的css就正常显示动画过渡。
怎么解决?
<div id="example-1">
<button @click="show = !show">
Toggle render
</button>
<transition name="slide-fade">
<p v-if="show">hello</p>
</transition>
</div>
new Vue({
el: '#example-1',
data: {
show: true
}
})
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
What is expected?
没有过渡动画,元素直接消失。
What is actually happening?
期待有动画