< html >
< head >
< title > test < / title >
< script src= " https://cdn.jsdelivr.net/npm/.;></script>
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: "-sharpapp",
data:{
show: true,
},
methods:{
change() {
this.show=!this.show;
}
}
})
< / script >
< / html > vue transition is not valid for width and height is not bug request the correct posture! Thank you ~