vue的动画与过渡

前言

vue的动画与过度

---

一、先来看看css3的动画实现

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <h1 v-show="isShow" class="go">你好啊！</h1>
  </div>
</template>

<script>
export default {
  name:'Test',
  data () {
    return {
      isShow:true,
    }
  }
}
</script>

<style scoped>
	h1{
		background-color: orange;
	}
  .come{animation: atguigu 0.5s linear;}
  .go{animation: atguigu 0.5s linear reverse;}

	@keyframes atguigu {
		from{
			transform: translateX(-100%);
		}
		to{
			transform: translateX(0px);
		}
	}
</style>

问题很明显，我们不能添加两个动画效果，必须额外附加判断语句 

二、vue中的动画与过渡

1.动画

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
  
    <transition name="hello" appear>
      <h1 v-show="isShow">你好啊！</h1>
    </transition>
  </div>
</template>

<script>
export default {
  name:'Test',
  data () {
    return {
      isShow:true,
    }
  }
}
</script>

<style scoped>
	h1{
		background-color: orange;
	}
    /*默认为.v-enter-active，使用.v-enter-active就是为没有name属性的transition添加动画*/
	.hello-enter-active{
		animation: atguigu 0.5s linear;
	}

	.hello-leave-active{
		animation: atguigu 0.5s linear reverse;
	}

	@keyframes atguigu {
		from{
			transform: translateX(-100%);
		}
		to{
			transform: translateX(0px);
		}
	}
</style>

2.过渡

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    //多个元素实现同一过渡
    <transition-group  name="hello" appear>
        //内部标签必须包含属性key
      <h1 v-show="!isShow" key="1">你好啊！</h1>
      <h1 v-show="!isShow" key="2">尚硅谷！</h1>
    </transition-group>
  </div>
</template>

<script>
export default {
  name:'Test2',
  data () {
    return {
      isShow:true
    }
  }
}
</script>

<style scoped>
	h1{
		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);
	}

</style>

3.第三方库 

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition-group 
			appear
			name="animate__animated animate__bounce" 
			enter-active-class="animate__wobble"
			leave-active-class="animate__bounceOut"
		>
			<h1 v-show="!isShow" key="1">你好啊！</h1>
			<h1 v-show="isShow" key="2">尚硅谷！</h1>
		</transition-group>
	</div>
</template>

<script>
    //这里必须导入第三方库
	import 'animate.css'
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}
	

</style>

---

总结

1. 写法：

   1. 准备好样式：

      • 元素进入的样式：

        1. v-enter：进入的起点

        2. v-enter-active：进入过程中

        3. v-enter-to：进入的终点

      • 元素离开的样式：

        1. v-leave：离开的起点

        2. v-leave-active：离开过程中

        3. v-leave-to：离开的终点

   2. 使用<transition>包裹要过度的元素，并配置name属性：

      <transition name="hello">
          <h1 v-show="isShow">你好啊！</h1>
      </transition>

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