v2中使用默认的
xx-enter-from或xx-leave-to的css不生效,导致初始动画无效
解决办法:使用animation自定义过渡动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
p {
width: 200px;
height: 100px;
background: red;
position: absolute;
right: 20px;
overflow: hidden;
}
.slide-fade-enter-active {
animation: bounce-in 5s ease;
}
.slide-fade-leave-active {
animation: bounce-in 5s reverse;
}
@keyframes bounce-in {
0% {
width: 0;
}
100% {
width: 200px;
}
}
</style>
</head>
<body>
<div id="app">test</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
new Vue({
template: `<div><button @click="show = !show">Toggle Slide + Fade</button>
<Transition appear name="slide-fade" mode="in-out">
<p v-if="show">hello</p>
</Transition></div>`,
data() {
return {
show: false
}
}
}).$mount('#app')
</script>
</html>
