vue 过渡动画类名

vue 过渡动画类名：

v-enter：定义过渡的开始状态

v-enter-active：定义过渡的状态

v-enter-to：定义进入过渡的结果状态

v-leave：定义离开过渡的开始状态

v-leave-active：定义过渡状态

v-leave-to：定义开始过渡的结束状态

例子：

<html>
　　<head>
　　　　<title>css过渡</title>
　　　　<meta charset="utf-8">
　　　　<script src="https://cdn.jsdelivr.net/npm/vue"></script>
　　　　<style>
　　　　.fade-enter-active{
　　　　　　transition:all 0.3s ease;
　　　　}
　　　　.fade-leave-active{
　　　　　　transition:all 0.3s linear;
　　　　}
　　　　.fade-enter,.fade-leave-to{
　　　　　　transform: translateX(10px);
　　　　　　opacity: 0;
　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<div id="app">
　　　　　　<button @click="show=!show">toggle</button>
　　　　　　<transition name="fade"><!-- 上面“v-”中的v为name的属性值 -->
　　　　　　　　<p v-if="show">shira</p>
　　　　　　</transition>
　　　　</div>
　　</body>
　　<script>
　　　　new Vue({
　　　　　　el:'#app',
　　　　　　data(){
　　　　　　　　return{
　　　　　　　　　　show:true
　　　　　　　　}
　　　　　　}
　　　　})
　　</script>
</html>

posted on 2018-02-27 09:28  ss要更加努力  阅读(157)  评论(0)    收藏  举报

导航