Skip to content

全局引入css后,vue官方的过渡动画不能用了? #2818

@wgf4242

Description

@wgf4242
  • 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

http://xxx

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?

期待有动画

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions