<style>
#box{
width:100px;
height:100px;
background-color: red;
}
/* 通過class設定動畫方式，一共需要6個class */
/* 設定入場動畫開始時的樣式 */
.v-enter,.v-leave-to{
opacity: 0;
/* 設定入場動畫過程中的樣式 */
.v-enter-active,.v-leave-active{
transition: all 0.7s;
/* 設定入場動畫結束後的樣式 */
.v-enter-to,.v-leave{
opacity: 1;
/* 設定元素離場動畫開始時的狀态 */
/* .v-leave{
} */
/* 設定元素離場動畫過程中的狀态 */
/* .v-leave-active{
/* 設定元素離場動畫結束時的狀态 */
/* .v-leave-to{
#b2{
background-color: greenyellow;
/* v- 開頭的動畫樣式是為匿名transition标簽設定的樣式，還可以使用xxx-center為某種transition标簽設定動畫樣式 */
.ani-enter{
height:0 !important;
.ani-enter-active{
.ani-enter-to{
height:100px ;
.ani-leave{
width:100px ;
.ani-leave-active{
.ani-leave-to{
width:0px !important;
</style>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="show">
<!-- v-show和v-if在顯示和隐藏之間切換時 是不帶動畫的，如果需要添加動畫，要使用transition标簽 -->
<transition>
<!-- v-show和v-if寫在transition标簽中時，當元素需要隐藏時，不會立刻隐藏，而是執行離場動畫，動畫結束之後才隐藏。 -->
<div id="box" v-show="show"></div>
</transition>
<!-- 如果在頁面中需要執行多個動畫，則可以為transition标簽設定name屬性，在css中單獨為這個transition設定動畫方式 -->
<transition name="ani">
<div id="b2" v-show="show"></div>
</div>
<script src="vue.js"></script>
<script>
// 動畫的差別
// 簡單動畫 少幀
new Vue({
el:"#app",
data:{
show:false
}
})
</script>
</body>
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)