<script src="../vue.js"></script><title>Document</title><style>
.fade-enter{ opacity: 1;
} .fade-enter-active{ transition: opacity 3s;
}</style></head><body><div id="app">
<transition name='fade'>
<div v-show='show'>hello world</div>
</transition>
<button @click='handclick'>change</button>
</div>transition的过渡效果不起作用啊，为什么？？
2 回答
lfeish
TA贡献1条经验 获得超0个赞
这个问题的根本是 ：
div元素使用display:none(block)实现隐藏与显示的时候，会与transition属性冲突，导致过渡效果无效。display会破坏transition。
v-if 和 v-show 都会引起浏览器重流(reflow).
从效果上来看，display:none 时，元素立即消失了，动画无效果。display：block时，元素立即显示了，动画无效果。
不过让我比较奇怪的是，如果在 vue 组件中 却可以起作用
添加回答
举报
0/150
提交
取消