margin: auto;
top: 100px;
}
.bug{
position: relative;
opacity: 1 important;
}
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="demo">
<button v-on:click="show = !show">点击</button>
<transition name="haha">
<div class="bug" v-if="show">你好</div>
</transition>
</div>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
show: true
}
})
</script>
</body>
</html>
这样就既可以实现过渡效果也不拆去div中优先级较高的css属性
以上这篇解决vue的过渡动画无法正常实现问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
