<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用animation與transform實現vue的動畫效果</title>
<script src="vue.js"></script>
</head>
<body>
<div id="hdcms">
<button @click="type=!type">顯示/隱藏</button>
<transition name="lt">
<h1 v-if="type">http://www.baidu.com百度一下就知道</h1>
</transition>
</div>
<script>
new Vue({
el: "#hdcms",
data: {
type: false
}
});
</script>
<!--
animation:活潑;
transition:過渡
transform：改變
translate：轉化
-->
<style type="text/css">
.lt-enter-active{
animation: show-in 1s;
transition: all 1s;
}
.lt-leave-active{
animation: show-out 1s;
transition: all 1s;
}
.lt-enter,.lt-leave-to{
opacity: 0;
}
@keyframes show-in {
0%{
transform: translate(200px,0);
}
100%{
transform: translate(0,0);
}
}
@keyframes show-out {
0%{
transform: translate(0,0);
}
100%{
transform: translate(200px,0);
}
}
</style>
</body>
</html>
