<!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>