动画

使用css动画样式，配合vue实现动画效果。

1. 编写模板 ```vue

2. 
编写动画样式
```css
h1 {
    background-color: orange;
}
/* 进入的动画 */
.come {
    animation: test 1s linear;
}
/* 离开的动画 */
.go {
    animation: test 1s reverse;
}
/* 定义动画 */
@keyframes test {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0px);
    }
}

1. 要使用vue动画的标签使用<transition>包裹

   <template>
   <div>
      <button @click="isShow = !isShow">显示/隐藏</button>
      <!-- 使用transition包裹住要使用动画的标签 -->
      <transition>
          <h1 v-show="isShow">你好啊</h1>
      </transition>
   </div>
   </template>

1. 将进入的动画样式改为.v-enter-active，离开的动画改为.v-leave-active： ```css / 当vue渲染transition标签内容时，vue会自动加载v-enter-active动画样式 / .v-enter-active { animation: test 1s linear; }

/ 当transition标签内容不展示时，vue会自动使用v-leave-active动画样式离开 / .v-leave-active { animation: test 1s reverse; }

总结：
如果要使用css动画配合vue，需要：
1. 要使用动画的内容使用`<transition>`标签包裹
2. 定义`.v-enter-active`入场动画、`.v-leave-active`离场动画
如果页面中有多个`<transition>`，需要有不同的动画样式，可以为`<transition>`指定`name`属性：
```html
<transition name='hello'>
</transition>

此时定义的入场动画、离场动画的v也需要被替换为指定的名称：

.hello-enter-active {
    .....
}
.hello-leave-active {
    ....
}

页面刚打开时，没有动画效果，如果需要在页面打开就直接展示动画效果，需要使用appear属性设置为true：

<transition name='hello' :appear="true"></transition>
<!-- 可以简写为 -->
<transition name='hello' appear></transition>

过渡

使用vue的过渡实现动画效果。

1. 编写模板 ```vue

2. 
编写样式
```vue
<style scoped>
h1 {
    background-color: orange;
}
/* 进入的起点，离开的终点 */
.hello-enter,.hello-leave-to {
    transform: translateX(-100%);
}
/* 进入的终点，离开的起点 */
.hello-enter-to,.hello-leave {
    transform: translateX(0);
}
.hello-enter-active,.hello-leave-active{
    transition: 0.5s linear;
}
</style>

总结：

vue的过渡效果中：入场动画位置起点.v-enter，入场动画位置终点.v-enter-to，离场动画起点.v-leave，离场动画终点.v-leave-to。

动画的时长等需要在.v-enter-active、.v-leave-active中定义。

多个元素过渡

<transition>标签内只能有一个根元素，例如：

<template>
    <transition>
        <!-- transition内部只能有一个根元素 -->
        <h1>hello</h1>
    </transition>
</template>

如果需要过渡的内容是一个列表，需要使用<transition-group>，而且被包裹的元素需要有key属性：

<template>
    <!-- 使用transition-group -->
    <transition-group name='hello'>
        <!-- 被包裹的标签需要有key属性     -->
        <h1 v-show='isShow' key='1'>hello</h1>
        <h1 v-show='isShow' key='2'>world</h1>
    </transition-group>
</template>

使用第三方库

可以使用一些已经成型的封装好了的动画库，例如Animate.css。

安装Animate：

npm i animate.css

引入animate库：

<script>
import 'animate.css'  // 引入样式库
</script>

在模板中直接库里面的样式即可，无需再自己定义样式：

name属性必须为animate__animated animate__bounce，

enter-active-class定义入场动画，leave-active-class定义离场动画，动画名称可以在animate.css官网复制

<template>
  <div>
      <button @click="isShow = !isShow">显示/隐藏</button>
      <transition 
        appear
        name="animate__animated animate__bounce" 
        enter-active-class="animate__swing"
        leave-active-class="animate__backOutUp"
      > 
          <h1 v-show="isShow">你好啊</h1>
      </transition>
  </div>
</template>