Vue实现动画效果

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;
}

    <transition name="hello" :appear="true">
      <h1 v-show="isShow" >有动画效果的文字</h1>
    </transition>

: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属性

<transition name="hello" > 
    <h1 v-show="isShow" >有动画效果的文字</h1>
</transition>

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);
   }
}