Vue中的过渡和动画

详情点击

---

1. 过渡

---

语法

• 标签：<transition name = 'xxx'><transition >
• 类名：

  1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

  2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

  3. v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

  4. v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

  5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

  6. v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

使用步骤

---

第一段过渡：从显示到隐藏

• 第一步：定义末状态
  • 如果不指定过渡过程中的初状态，就从当前状态执行

.xxx-leave-to{}

• 第二步：定义过渡事件和属性

.xxx-leave-active{}

到这里我们就已经完成一个过渡的状态了，但是从末状态多我们的初始状态，我们还可以接着定义

第二段过渡：从隐藏到显示

• 第三步：定义过渡后的状态
  • 但是我们元素如果初始的时候有状态，那么他会瞬间覆盖此时指定的状态
  • 如果没有定义过渡的初始状态，那么他就会从，自己本身的样式开始过渡

.xxx-enter-to{}

• 第四步：定义过渡时的状态，如果过渡的状态与第二步相同，可以使用并集选择器

.xxx-enter-active{}

此外我们可以指定过渡开始时候的样式，当然这个不是必选的

/*第一段过渡的初始样式*/
.xxx-leave{}
/*第二段过渡的初始样式*/
.xxx-enter{}

• 如果指定了这两个类名，那么两个阶段的过渡，就是从指定的初始样式开始的

实战

---

我使用vue/cli4搭建的一个工程 点击

1. 我们新建一个AnimationTestSingle.vue的文件，并映射成组件，写上如下代码

template

<template>
    <div>
        <h1>AnimationTestSingle</h1>
        <br />
        <transition name="fade">
            <div class="box" v-show="isShow">toggle</div>
        </transition>
        <br>
        <button @click="handleToggle">toggle</button>
    </div>
</template>

JS

export default {
    data() {
        return {
            isShow: true
        };
    },
    methods: {
        handleToggle() {
            this.isShow = !this.isShow;
        }
    }
};

CSS

.box{
    width: 200px;
    height: 200px;
    background-color: yellowgreen;
    text-align: center;
    line-height: 200px;
}

此时的界面是这样的

只要进行点击就会显示和隐藏
2. 下面给他加上动画效果

.fade-leave-to{
    opacity: 0;
    color: red;
    /* 只有块元素才能 transform 的属性才起作用 */
    transform: translateY(200px);
}
.fade-leave-active,.fade-enter-active{
    transition:all 1s;
}
.fade-enter-to{
    transform: scale(6);
    background-color: #fff;
}

需要注意的是

• 我们没有为每一次的过渡指定过渡的初始样式，他每一次都是从自身的样式开始过渡

2. 动画

---

使用动画的语法和过渡差不多，甚至更简单

步骤

---

1. 定义关键帧

@keyframes bounce-in {
    0% {
        transform: scale(0);
    }
    25%{
        transform: scale(1.5);
    }
    50% {
        transform: scale(1);
    }
    75%{
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

2. 定义类名，我们只需要定义过渡时的类名就可以了

.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}

实战

---

我们将上一个文件进行复制，把改<transition>的标签为

<transition name="bounce">

然后把上面的代码进行复制，就会看到了动画的效果