关于过渡动画
来源：2-20 过渡效果
Bighao啾啾啾
2019-12-11 22:49:14
<template>
<div>
<div>过渡效果</div>
<div>-----------------</div>
<div>
<button @click="show = !show">hi</button>
<transition name ="fade">
<p v-if="show">hello</p>
</transition>
</div>
</div>
</template>
<script>
export default {
data() {
return {
show: true
};
}
};
</script>
<style>
.fade-enter-active, .fade-leave-active{
transition: opacity 0.5
}
.fade-enter, .fade-leave-to{
transition: opacity 0;
}
</style>
麻烦老师跑一下我的代码，过渡动画没有生效啊，什么原因呢？
写回答
2回答
-
好帮手慕慕子
2019-12-12
同学你好， 应该是在active下设置过渡属性，其他的时候只需要设置opacity属性即可。示例：
如果帮助到了你，欢迎采纳，祝学习愉快~
0 -
Bighao啾啾啾
提问者
2019-12-11
transition: opacity 0.5这里后面改成了transition: opacity .5s
但是效果还是感觉没有的呀
0
相似问题
我这样写为什么没有过渡效果啊
回答 1