Vue实现动画效果

在一个组件的样式中编写一个关键帧

@keyframes guanjianzhen{
   from{
    transform: translateX(-100%);
   }
   to{
    transform: translateX(0px);
   }
}

设置关键帧的过渡效果

.come{
  animation: guanjianzhen 1s linear;
}

.go{
  animation: guanjianzhen 1s reverse;
}

可以通过修改h1标签的类名来实现动画的过渡效果。

    <h1 v-show="isShow" class="go">有动画效果的文字</h1>

更好的方式是使用transition标签,vue命名来的动画的样式名称不是come，是v-enter-active,离开的样式命名v-leave-active 如果transition标签设置了name，那么来去的动画也都要对应的改变名称，hello-enter-active，当多个内容需要动画的时候就需要命名了，不然会出现冲突。

<transition name="hello">
.hello-enter-active{
  animation: guanjianzhen 0.5s linear;
}

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

设置打开网页就自动展现动画 ```

有动画效果的文字

``` :appear="true"可以直接写成appear.

下面两段代码的功能是等价的。 ``` h1{ background-color: orange; transition: 0.5s linear; }

/* 进入的起点 / .bye-enter{ transform: translateX(-100%); } / 进入的终点 / .bye-enter-to{ transform: translateX(0px); } / 离开的起点 / .bye-leave{ transform: translateX(0px); } / 离开的终点 */ .bye-leave-to{ transform: translateX(-100%); }

h1{ background-color: orange; }

/* 进入的起点离开的终点*/ .bye-enter,.bye-leave-to{ transform: translateX(-100%); } .bye-enter-active,.bye-leave-active{ transition: 0.5s linear; } /* 进入的终点离开的起点*/ .bye-enter-to,.bye-leave{ transform: translateX(0px); }

如果页面中有多个元素需要过渡需要设置transition，这时候可以使用transition-group

  <transition-group name="bye" :appear="true"> 
  <h1 v-show="!isShow" key="1">有动画效果的文字1</h1>
  <h1 v-show="isShow" key="2">有动画效果的文字2</h1>
  </transition-group>


# Vue封装的过渡与动画的总结
1. 作用：在插入、更新或者移除DOM元素时，在合适的时候给元素添加样式类名。
2. 使用transition包裹要过渡的元素，并配置name属性

有动画效果的文字

``` 3. 若有多个元素需要过渡，需要使用transition-group，且每个元素都要指定key值

TodoList设置动画效果

通过设置动画效果实现删除慢慢消失，将MyItem整个li都用transition标签包裹设置name=todo, 或者也可以给MyList组件中的MyItem设置transition-group，v-for里面的todos是多个元素

 <transition name="todo" appear>
   <li>
      <label>
        <!-- <input type="checkbox" v-model="todo.done"/>
          <input type="checkbox" v-model="a"/>  -->
        <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)" />
        <span v-show="!todo.isEdit">{{ todo.title }}</span>
        <input v-show="todo.isEdit" type="text" 
        :value="todo.title" 
        @blur="handleBlur(todo)"
        ref="inputTitle">
      </label>
       <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
      <button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button>
    </li>
 </transition>

.todo-enter-active{
  animation: guanjianzhen 0.5s linear;
}

.todo-leave-active{
  animation: guanjianzhen 0.5s  linear reverse;
}
@keyframes guanjianzhen{
   from{
    transform: translateX(-100%);
   }
   to{
    transform: translateX(0px);
   }
}