从这节课开始我们来学习一下vue中的动画效果，在vue代码中我有很多种方式来设置动画效果，其中通过css样式来驱动动画也是我们经常使用且成本最低的技术方案。

我们看一下怎么来实现，可能大家对于css的动画也不默认，那我们就来直接写代码了。

老样子我们还直接在helloWorld代码基础上来修改，我们给div设置一个class moveAnimate，后面我们要对这个class来写样式。

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "hello world!"
      }
    },
    template: `<div class='moveAnimate'>{{message}}</div>`
  })
  const vm = app.mount("#app")
</script>

我们在 .moveAnimate 里面来是设置了一个slideRight动画 设置为3秒执行结束，并且使用ease由慢到快动画效果，然后就是通过@keyframes 来定义名slideRight的动画效果，从0%到50%向右移动100px最后在回到原来的位置

<style>
  .moveAnimate{
    animation: slideRight 3s ease;
  }

  @keyframes slideRight{
    0%{
      transform: translateX(0);
    }
    50%{
       transform: translateX(100px);
    }
    100%{
      transform: translateX(0);
    }
  }
</style>

动态设置动画

我们来声明一个变量isAnimate 默认false ，然后用这个变量来动态绑定class实现从而实现一个开关的效果。

我们还需要来放置一个按钮，给绑定一个点击事件，点击这个按钮指定handelClick来切换isAnimate为false和true。

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "hello world!",
        isAnimate:false
      }
    },
    methods: {
      handelClick(){
        this.isAnimate=!this.isAnimate        
      } 
    },
    template: `
      <div :class="{moveAnimate:isAnimate}">{{message}}</div>
      <button @click="handelClick">启动/关闭</button>
    `
  })
  const vm = app.mount("#app")
</script>

这个样我们就可以通过一个状态控制动画的启动和关闭。

CSS的过渡效果

同的方式我们可以给它使用到css的过渡效果上。我们直接的来写代码。

注释掉之前的template重新来写一个template:

 template:`
      <div :class={divBlue:isAnimate} class="div">{{message}}</div>
      <button @click="handelClick">启动/关闭</button>
    `

给它写死一个class 为div,给它设置一个transition样式属性，并且给它设置一个默认红色。

 .div{
    transition: color 2s ease;
    color:red;
  }

然后再给它动态绑定一个class divBlue 给它换一个颜色

.divBlue{
   color: blue;
}

然后我们就可以来看一下效果了。

那么这节课就到这里结束了，这几个课我们学习了在vue来动态设置CSS动画和过渡效果。