vue过渡对宽高无效

<!doctype html>
<html>
<head>
<title>test</title>
<script src="https://cdn.jsdelivr.net/npm/...;></script>
<style>

div {

width: 100px;
height: 100px;
background-color: red;

}
.v-enter {

width: 0

}
.v-enter-to {

width: 100px

}
.v-enter-active {

transition: all 1s;

}
.v-leave {

width: 100px

}
.v-leave-to {

width: 0

}
.v-leave-active {

transition: all 1s;

}
</style>
</head>

<body>
<div id= 'app'>
<button @click= 'change'>21</button>
<transition>
<div id= 'div' v-show= 'show'></div>
</transition>
</div>
</body>
<script>
new Vue({

el: '#app',
data:{
    show: true,
},
methods:{
    change() {
        this.show=!this.show;
    }
}

})
</script>

</html>vue过渡对宽高无效是不是bug请求正确的姿势!!谢谢~~

阅读 4.2k
1 个回答

不是vue的问题,你写的transation效果太简单了。

clipboard.png

官方建议用animate.css

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题