vue的动画transition不起作用
<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的过渡效果不起作用啊，为什么？？
POPMUISE浏览 6674回答 2
2回答
-
萧十郎
不透明度为1不会有什么动画吧，而且点击事件控制show的变化写了么 -
lfeish
这个问题的根本是 ：div元素使用display:none(block)实现隐藏与显示的时候，会与transition属性冲突，导致过渡效果无效。display会破坏transition。v-if 和 v-show 都会引起浏览器重流(reflow). 从效果上来看，display:none 时，元素立即消失了，动画无效果。display：block时，元素立即显示了，动画无效果。不过让我比较奇怪的是，如果在 vue 组件中 却可以起作用
随时随地看视频慕课网APP
相关分类
Vue.js
JavaScript