第三章 使用Vue脚手架

3.9 vue所封装的过度与动画

01 动画效果

小结：

• 用vue实现动画效果，需要定义动画，使用动画，再用<transition></transition>
• 如果要给哪个标签设置动态效果，就把<transition></transition>包到哪个标签里去
• 类名：.v-enter-active,.v-leave-active 中的v 可以改变，可以改成from等；如果改了，就得给 tr添加属性 <transition name="hello"></transition>,.hello-enter-active
• appear 显示，同等于:appear:"true"
• 1. 定义关键帧

@keyframes atschool{
  from {
    /* 从左边来 */
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
复制代码

• 2. 使用动画

.v-enter-active {
  /* 来的时候播放哪个动画 */
}
.v-leave-active {
}
复制代码

• 3. 方法一：用vue实现动画切换

<transition appear>
      <h1 v-show="isShow" class="go">你好啊！</h1>
</transition>

复制代码

• 4. 方法二：自己实现动态切换效果 在click 加上回调，一会儿动态的显示go 一会显示come；如果是go,就切换成come;如果是come,就切换成go.

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <!-- 使用vue来实现切换效果 -->
    <transition appear>
      <h1 v-show="isShow" class="go">你好啊！</h1>
    </transition>
  </div>
</template>
复制代码

<style>
/* 用动画 */
.v-enter-active {
  /* 来的时候播放哪个动画 */
  animation: atschool 1s;
}

.v-leave-active {
  animation: atschool 1s reverse;
}

/* 定义动画效果 */
@keyframes atschool {
  /* 从哪来到哪去 */
  from {
    /* 从左边来 */
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
</style>


复制代码

02 过渡动画

• 如果只写动画效果, 那么写下面的代码就好了

  /* 进入的过程中，离开的过程中 */
  .hello-enter-active,
  .hello-leave-active {
    /* 来的时候播放哪个动画 */
    transition: 1s linear;
  }
  复制代码
  

• 如果要写过渡动画，那么还要加上前面四个

/* 进入的起点  离开的终点*/
.hello-enter,
.hello-leave-to {
  transform: translateX(-100%);
}
/* 进入的终点  离开的起点*/
.hello-enter-to,
.hello-leave {
  transform: translateX(0);
}
复制代码

/* 进入的过程中，离开的过程中 */
    .hello-enter-active,
    .hello-leave-active {
      /* 来的时候播放哪个动画 */
      transition: 1s linear;
    }
  这个也可以写成
  想要H1实现动画效果，就在h1里面写
  h1 {
  background-color: orange;
  /* 谁变就给谁加 */
  transition: 1s linear;
}
  
复制代码

• 当然 <transition></transition>里面要添加属性name="hello",即

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