<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>-->
<script src="lib/vue.min.js"></script>
<link rel="stylesheet" href="lib/bootstrap.min.css"/>
<script src="lib/moment-with-locales.min.js"></script>
<style>
/*2.自定義樣式*/
.v-enter,
.v-leave-to{
opacity: 0;
transform:translateX(200px);
}
.v-enter-active,
.v-leave-active,
.toggle2-enter-active,
.toggle2-leave-active{
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.toggle2-enter,
.toggle2-leave-to{
opacity: 0;
transform:translateY(200px);
}
</style>
</head>
<body>
<div id="app">
<button type="button" class="btn btn-info" @click="flag=!flag">切換</button>
<!--1.使用transition將需要動畫效果的元素包裹起來-->
<transition>
<div v-show="flag" style="width:100px ;height: 100px;background-color: lawngreen"></div>
</transition>
<hr>
<button type="button" class="btn btn-info" @click="flag2=!flag2">切換2</button>
<!--不加name屬性的時候採用樣式v-*
加上name的時候採用樣式value-*
-->
<transition name="toggle2">
<div v-show="flag2" style="width:100px ;height: 100px;background-color:hotpink"></div>
</transition>
</div>
<script>
var app = new Vue({
el:"#app",
data:function(){
return {
flag:false,
flag2:false
}
},
methods:{
}
});
</script>
</body>
</html>
