Vue —— 进阶脚手架（六）（过渡与动画）

Vue全家桶 系列文章目录

内容	参考链接
Vue2.x - 基础	Vue2.x - 基础
Vue2.x - 进阶（零）	初始化脚手架
Vue2.x - 进阶（一）	refs属性、props配置项
Vue2.x - 进阶（二）	混入 mixin、插件 plugins、样式 scoped
Vue2.x - 进阶（三）	本地存储
Vue2.x - 进阶（四）	组件的自定义事件
Vue2.x - 进阶（五）	全局事件总线、消息订阅与发布
Vue2.x - 进阶（六）	过渡与动画
Vue2.x - 进阶（七）	解决开发环境 Ajax 跨域问题
Vue2.x - 进阶（八）	默认插槽、具名插槽和作用域插槽
Vue2.x - 周边（Vuex、Vue-router）	Vuex、Vue-router
Vue3.0 - 新增	Vue3.0 新增内容
Vue2.x 项目（附源码）	Vue + ElementUI 后台管理项目（附源码）
Vue3.0 项目	Vue3.0 企业级 App

---

Vue 封装的过渡和动画

1. 作用

在插入、更新或移出DOM元素时，在合适的时候给元素添加样式类名。

2. 图示

3. 准备好样式

元素进入的样式

1. v-enter：进入的起点
2. v-enter-active：进入的过程中
3. v-enter-to：进入的终点

元素离开的样式

1. v-leave：离开的起点
2. v-leave-active：离开的过程中
3. v-leave-to：离开的终点

4. 包裹要过渡的元素

使用 transition 包裹要过渡的元素，并配置 name 属性

	<transition name='hello'>
		<h3 v-show='isShow'>Hello</h3>
	</transition>

注意：若有多个元素需要过渡，则需要使用 <transition-group>，且每个元素都要指定 key 值。

实例：动画效果实现动画

Vue动画效果

先在 @keyframes xxx {} 中准备好动画效果，再包裹要动画的元素。

	<template>
	  <div>
	    <button @click="isShow = !isShow">显示/隐藏</button>
	    <transition appear>
	      <h3 v-show="isShow">Hello~</h3>
	    </transition>
	  </div>
	</template>
	
	<script>
	export default {
	  name: "myTest",
	  data() {
	    return {
	      isShow: true,
	    };
	  },
	};
	</script>
	
	<style scoped>
	h3 {
	  background-color: orange;
	}
	.v-enter-active {
	  animation: demo 0.5s linear;
	}
	.v-leave-active {
	  animation: demo 0.5s linear reverse;
	}
	@keyframes demo {
	  from {
	    transform: translateX(-100%);
	  }
	  to {
	    transform: translateX(0px);
	  }
	}
	</style>

实例：过渡效果实现动画

实现相同的效果

	<template>
	  <div>
	    <button @click="isShow = !isShow">显示/隐藏</button>
	    <transition-group name='hello' appear>
	      <h3 v-show="!isShow" key="1">Hello~</h3>
	      <h3 v-show="isShow" key="2">Vue~</h3>
	    </transition-group>
	  </div>
	</template>
	
	<script>
	export default {
	  name: "myTest",
	  data() {
	    return {
	      isShow: true,
	    };
	  },
	};
	</script>
	
	<style scoped>
	h3 {
	  background-color: orange;
	}
	/* 进入的起点 离开的终点*/
	.hello-enter, .hello-leave-to{
	  transform: translateX(-100%);
	}
	.hello-enter-active, .hello-leave-active{
	  transition: 0.5s linear;
	}
	/* 进入的终点 离开的起点*/
	.hello-enter-to, .hello-leave{
	  transform: translateX(0);
	}
	
	@keyframes atguigu {
	  from {
	    transform: translateX(-100%);
	  }
	  to {
	    transform: translateX(0px);
	  }
	}
	</style>

实例：引入第三方库实现动画

1. 第三方库 | 链接地址
2. 在终端键入 $ npm install animate.css 命令
3. 按要求选择配置

	<template>
	  <div>
	    <button @click="isShow = !isShow">显示/隐藏</button>
	    <transition-group 
	    appear
	    name="animate__animated animate__bounce" 
	    enter-active-class="animate__swing"
	    leave-active-class="animate__backOutUp"
	    >
	      <h3 v-show="!isShow" key="1">Hello~</h3>
	      <h3 v-show="isShow" key="2">Vue~</h3>
	    </transition-group>
	  </div>
	</template>
	
	<script>
	import "animate.css";
	export default {
	  name: "myTest",
	  data() {
	    return {
	      isShow: true,
	    };
	  },
	};
	</script>
	
	<style scoped>
	h3 {
	  background-color: orange;
	}
	/* 进入的起点 离开的终点*/
	.hello-enter,
	.hello-leave-to {
	  transform: translateX(-100%);
	}
	.hello-enter-active,
	.hello-leave-active {
	  transition: 0.5s linear;
	}
	/* 进入的终点 离开的起点*/
	.hello-enter-to,
	.hello-leave {
	  transform: translateX(0);
	}
	
	@keyframes atguigu {
	  from {
	    transform: translateX(-100%);
	  }
	  to {
	    transform: translateX(0px);
	  }
	}
	</style>

不积跬步无以至千里 不积小流无以成江海