功能描述:单击按钮的时候会出现另一个盒子动画滑出
代码如下:
<body>
<div id="app">
<button @click="bol=!bol">切换</button>
<transition name="fade">
<div class="box" v-if="bol"></div>
</transition>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
bol: true
}
})
</script>
样式写法如下:
<style>
.box {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: red;
transition: all 1s; /* 也可以直接在这添加transition*/
}
.fade-enter {
opacity: 0;
transform: translateX(-300px);
}
.fade-leave-to {
opacity: 0;
transform: translateX(300px);
}
.fade-enter-active,
.fade-leave-active {
transition: all 1s;
}
</style>
效果图如下:
当单击按钮的时候会以0.5s的速度匀速消失
说明:由于没有gif动态图,则以图片展示