Vue实现动画效果

效果"/>

Vue实现动画效果

Vue实现动画效果

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

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

设置关键帧的过渡效果

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