美文网首页
vue 过渡动画(transition) 个人理解

vue 过渡动画(transition) 个人理解

作者: 你是路上的光 | 来源:发表于2020-03-16 09:00 被阅读0次

版本:vue 2.x
实验对象:一个小demo

demo:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的简单过渡</title>
<script src="../vue.js"></script>
<style>

        #wrapper{
            border: 1px solid red;
            height: 200px;
            margin-top: 200px;
            position: relative;
            /* overflow: hidden; */
        }
        .title{
            position: absolute;
            left: 50%;
            top: 100px;
            background: blue;
            color: aliceblue;
            font-size: 20px;
            width: 300px;
            text-align: center;
            line-height: 100px; 
        }
       .fade-enter{
            opacity: 0;
            transform:  translateY(50px);
        }
        .fade-leave-to {
            opacity: 0;
            transform:  translateY(100px);
        }
        .fade-enter-active{
            transition: all .5s;
        }
        .fade-leave-active {
            transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }

</style>
</head>
<body>

<div id="root">
    <div id="wrapper">
            <transition name="fade">
                <div v-if="show" class="title">hello world</div>
            </transition>
        </div>
        <button v-on:click="handleClick">
            Toggle
        </button>
</div>
    <script>
        new Vue({
            el: '#root',
            data: {
                show: true
            },
            methods:{
                handleClick:function(){
                    this.show = !this.show
                }
            }
        })
    </script>

</body>
</html>

个人理解:
先出现enter还是leave,由初始显隐状态决定:
如果目标元素刚开始时时隐藏,那么demo效果的会按照先后顺序,出现有两个阶段:1阶段:隐藏->显示 此乃enter; 2阶段 显示->隐藏 此乃leave。故先出现enter,再出现leave
如果目标元素刚开始时时显示,那么demo效果的会按照先后顺序,出现有两个阶段:1阶段:显示->隐藏 此乃leave; 2阶段 隐藏->显示 此乃enter。故先出现leave,再出现enter
以本demo为例,更改show的值分别为true或false。观察出现的效果。

为什么opacity可以控制显隐,个人理解:
由于v-show控制的,实际是display属性在产生作用,如display:none.(但是display:none 和 transition是冲突的。有display:none则不会出现过渡效果)。可是正在使用的明明是v-show,咋办呢?那么所以,要在隐藏->显示或显示->隐藏的过程的第二帧就要给加上一个class。这个class就是v-enter或v-leave. 而这两个class里均有opacity属性。于是乎,就替换了display。 此时class 名为v-enter-active或v--leave-active里的transition属性通过opacity或all检测到有opacity,并监听opacity的变化。当opacity的值发生变化,于是transition产生设定的过渡效果了。此时,整个过程的显隐变成了opacity来控制;

位移效果是以目标元素初始位置决定的:
以本demo为例,enter阶段的位移是指从何处移动到当前位置。leave阶段的位置是指从当前位置移动到何处

本demo总结描述:
-1,如果show的值是false.当点击Toggle按钮时,则先出现enter阶段,再出现leave阶段。在enter阶段的第二帧添加fade-enter的样式,显隐开始交由opacity控制变化,opacity值的走向是0->1,从下方50px处回到初始位置,fade-enter-active里的transform监听到opacity和translateY变化,应用过渡效果
-2,如果show的值是false.当点击Toggle按钮时,则先出现leave阶段,再出现enter阶段。在leave阶段的第二帧添加fade-leave-to的样式,显隐开始交由opacity控制,opacity值的走向是1->0,从初始位置处移到下方100px,fade-leave-active里的transform监听到opacity和translateY变化,应用过渡效果

相关文章

  • vue 过渡动画(transition) 个人理解

    版本:vue 2.x实验对象:一个小demo demo: vue中的简单过渡 ...

  • vue03

    vue03 vue过渡 自带 动画:.fade-transition{transition: 1s all ea...

  • Vue动画

    Vue动画 Vue动画 CSS transition 在进入/离开的过渡中,会有 6 个 class 切换。 对于...

  • vue中的三种动画引用方法

    一.vue.transition vue-transition在过渡动画的不同时期通过切换不同class,给绑定元...

  • CSS3过渡动画

    过渡动画 transition属性简介transition是网页上的过渡动画,变化的逐渐过渡效果,简称过渡动画!列...

  • css动画过渡

    title: css动画和transition过渡toc: truedate: 2017-03-20 vue组件 ...

  • CSS3动画

    css3动画包括过渡,形变,动画 过渡transition: 指定过渡样式:transition-property...

  • CSS动画相关

    1.transition动画过渡属性 transition-property 设置过渡属性 transition-...

  • 前端09

    过渡动画 transition产生动画border-radius圆角设置过渡的时间:transition-dura...

  • 动画

    过渡动画 transition产生动画border-radius圆角设置过渡的时间:transition-dura...

网友评论

      本文标题:vue 过渡动画(transition) 个人理解

      本文链接:https://www.haomeiwen.com/subject/fidfshtx.html