vue第十二单元(vue中过渡效果的实现)

第十二单元(vue中过渡效果的实现)

#课程目标

熟练掌握transition组件的用法
熟练使用transition组件做过渡特效
熟练使用transition组件做动画特效
了解使用transition组件自定义过渡的类名

#知识点

#1.过渡简介

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。

语法格式：

<transition name = "nameoftransition">

   <div></div>

</transition>

我们可以通过以下实例来理解 Vue 的过渡是如何实现的：

<template>

  <div>

    <div>

      <button @click="handleTransition">按钮</button>

      <transition name="my-fade">

        <div v-show="show" class="m-text">动画实例</div>

      </transition>

    </div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      show: true

    };

  },

  methods: {

    handleTransition() {

      this.show = !this.show;

    }

  }

};

</script>

<style>

.m-text{font-size: 30px;color: red;}

/* 可以设置不同的进入和离开动画 */

/* 设置持续时间和动画函数 */

.my-fade-enter-active, .my-fade-leave-active {

  transition: opacity 1s

}

.my-fade-enter, .my-fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {

  opacity: 0

}

</style>

实例中通过点击 "按钮" 按钮将变量 show 的值从 true 变为 false。如果为 true 显示子元素 div 标签的内容。

过渡其实就是一个淡入淡出的效果。Vue在元素显示与隐藏的过渡中，提供了 6 个 class 来切换：

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

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

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

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

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

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

img\xutongbao-transition 对于这些在过渡中切换的类名来说，如果你使用一个没有名字的

v-enter-active 和 v-leave-active 可以控制进入/离开过渡的不同的缓和曲线，在下面章节会有个示例说明。

#2.CSS过渡

通常我们都使用 CSS 过渡来实现效果。

如下实例：

<template>

  <div>

    <div>

      <button @click="handleTransition">按钮</button>

      <transition name="slide-fade">

        <div v-show="show">hello</div>

      </transition>

    </div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      show: true

    };

  },

  methods: {

    handleTransition() {

      this.show = !this.show;

    }

  }

};

</script>

<style>

/* 可以设置不同的进入和离开动画 */

/* 设置持续时间和动画函数 */

.slide-fade-enter-active {

  transition: all .3s ease;

}

.slide-fade-leave-active {

  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);

}

.slide-fade-enter, .slide-fade-leave-to

/* .slide-fade-leave-active 用于 2.1.8 以下版本 */ {

  transform: translateX(10px);

  opacity: 0;

}

</style>

#3.css动画

CSS 动画用法类似 CSS 过渡，但是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

<template>

  <div>

    <div>

      <button @click="handleTransition">按钮</button>

      <transition name="bounce">

        <p v-if="show">hello</p>

      </transition>

    </div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      show: true

    };

  },

  methods: {

    handleTransition() {

      this.show = !this.show;

    }

  }

};

</script>

<style>

.bounce-enter-active {

  animation: bounce-in .5s;

}

.bounce-leave-active {

  animation: bounce-in .5s reverse;

}

@keyframes bounce-in {

  0% {

    transform: scale(0);

  }

  50% {

    transform: scale(1.5);

  }

  100% {

    transform: scale(1);

  }

}

</style>

#4.自定义过渡的类名

我们可以通过以下特性来自定义过渡类名：

enter-class

enter-active-class

enter-to-class (2.1.8+)

leave-class

leave-active-class

leave-to-class (2.1.8+)

自定义过渡的类名优先级高于普通的类名，这样就能很好的与第三方（如：animate.css）的动画库结合使用。 animate动画库：https://daneden.github.io/animate.css/

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

</head>

<body>

<div id = "databinding">

<button v-on:click = "show = !show">点我</button>

<transition

    name="custom-classes-transition"

    enter-active-class="animated tada"

    leave-active-class="animated bounceOutRight"

>

    <p v-if="show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>

</transition>

</div>

<script type = "text/javascript">

new Vue({

    el: '#databinding',

    data: {

        show: true

    }

})

</script>

</body>

</html>

#授课思路

#案例作业

使transition组件成如下图的动画效果