vue2.0 transition组件实现过渡效果

最新推荐文章于 2024-07-15 16:47:51 发布

Hi毛哥哥

最新推荐文章于 2024-07-15 16:47:51 发布

阅读量1.6k

点赞数

分类专栏： vue2.0

本文链接：https://blog.csdn.net/maolian1995/article/details/78981677

版权

vue2.0 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
<style>
*{margin: 0;padding: 0;}
.app{
width: 220px;
height: 310px;
background: #F0F0F0;
margin: 0 auto;
margin-top: 100px;
overflow: hidden;
}
.btn{
display: block;
width: 80px;
height: 30px;
background: #20B060;
color: #FFF;
text-align: center;
line-height: 30px;
outline: none;
border: none;
border-radius: 3px;
margin: 10px 0 0 10px;
}
.container{
width: 200px;
height: 200px;
background: #E0E0E0;
margin: 0 auto;
margin-top: 20px;
overflow: hidden;
}
.box{
width:100%;
height:100%;
text-align: center;
line-height: 200px;
background: #ff8282;
color: #Fff;
/*以下两个默认值，可不写*/
/*写上只是为了便于讲解，记住这两个*/
opacity: 1;
margin-left: 0;
}

.box-enter-active,.box-leave-active{
transition: all .8s;
}
.box-enter{
opacity: 0;
margin-top: 100%;
}
.box-leave-active{
opacity: 0;
margin-top: 100%;
}
</style>
</head>
<body>
<div id="app" class="app">
<button @click='showBox=!showBox' class="btn">切换</button>

<div class="container">
<transition name="box">
<div v-show="showBox" class="box">
i am the box
</div>
</transition>

</div>
</div>

<script>
new Vue({
el:'#app',
data:{
showBox:false
},
})
</script>

<h2>过渡原理分析</h2>

  Vue提供的组件叫transition， <transition name="box"></transition>
<br /><br />
  Vue提供的 <transition/> 组件，会在下列四种情况下起作用：
<br />
    ⑴. 条件渲染（使用v-if）
<br />
    ⑵. 条件展示（使用了v-show）
<br />
    ⑶. 动态组件
<br />
    ⑷. 组件根节点
<br />
在上述的任意一种情况发生的时候（比如：v-show的值为true切换成false的时候），我们可以给 <transition/> 组件包含的节点元素添加entering/leaving过渡动画效果
<br /><br />
当一个被 <transition/> 组件包含的节点出现了以上的4种情况的任意一种的时候，
Vue自动嗅探目标元素是否应用了 CSS 过渡或动画，
<br />
如果是，在恰当的时机添加/删除 CSS 类名。
<br />
所谓的：“在恰当的时机添加/删除 CSS 类名”，其实是：
<br />
1.v-enter：进入过渡效果（enter）刚刚开始那一刻。在元素被插入或者show的时候生效，在下一个帧就会立刻移除，一瞬间的事。
<br />
2.v-enter-active: 表示进入过渡（entering）的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。
<br />
3.v-leave: 离开过渡（leave）的开始那一刻。在离开过渡被触发时生效，在下一个帧移除，也是一瞬间的事。
<br />
4.v-leave-active：离开过渡（leaving）的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。
</body>
</html>