<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>css过渡动作实例：</title>
<script src="vue.js"></script>
</head>
<body>
<!--
隐藏和显示的动作：
v-enter:
v-enter-active
v-enter-to v-leave:
v-leave-active:
v-leave-to:
-->
<div id="hdcms">
<button @click="type=!type">显示/隐藏</button>
<transition name="hd">
<h1 v-if="type">http://www.baidu.com百度一下就知道</h1>
</transition>
</div> <script>
new Vue({
el: "#hdcms",
data:{
type:false
}
});
</script>
<style>
.hd-enter,.hd-leave{
opacity: 0;
}
.hd-enter-to{ }
.hd-enter-active{
transition:all 3s;
color: red;
}
.hd-leave-active{
transition: all 3s;
color: green;
} </style>
</body> </html>