Vue11-原生动画+vue动画
Vue11-原生动画+vue动画
1.原生动画
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-原生过度和动画</title>
<style>
h3 {
background-color: orange;
}
@keyframes demo {
from {
transform: translateX(100%);
}
to{
transform: translateX(0px);
}
}
/* CSS实现动画，然后再元素上通过class属性引入。 */
.come {
animation: demo 1s;
}
.go {
animation: demo 1s reverse;
}
</style>
</head>
<body>
<div>
<h3 class="come" id="h3">hello</h3>
</div>
</body>
</html>
2.vue动画
<template>
<div>
<!-- 原生动画。 -->
<button @click="isHide = !isHide">显示/隐藏</button>
<h3 v-show="isHide" class="come">hello</h3>
<!-- Vue实现动画 -->
<transition>
<h3 v-show="isHide">hello</h3>
</transition>
<!-- 如果transition标签指定了name属性，CSS就需要是
hello-enter-active和hello-leave-active。 -->
<!-- 使用transition刷新页面后的开始是没有动画的，如果需要动画可以通过将appear属性设置为true来实现。
即:appear="true"，:appear="true"可以简写为appear
-->
<transition name="hello" appear>
<h3 v-show="isHide">hello</h3>
</transition>
</div>
</template>
<script>
export default {
name: "MyText",
data() {
return {
isHide: true
}
}
}
</script>
<style scoped>
h3 {
background-color: orange;
}
@keyframes demo {
from {
transform: translateX(-100px);
}
to{
transform: translateX(0px);
}
}
/* CSS实现动画，然后再元素上通过class属性引入。 */
.come {
animation: demo 1s;
}
.go {
animation: demo 1s reverse;
}
/* vue实现动画 */
.v-enter-active {
animation: demo 1s;
}
.v-leave-active {
animation: demo 1s reverse;
}
.hello-enter-active {
animation: demo 1s;
}
.hello-leave-active {
animation: demo 1s reverse;
}
</style>
3.使用过度完成动画
<template>
<div>
<button @click="isHide = !isHide">显示/隐藏</button>
<transition>
<h3 v-show="isHide">hello</h3>
</transition>
<transition name="hello" appear>
<h3 v-show="isHide">hello</h3>
</transition>
</div>
</template>
<script>
export default {
name: "MyText",
data() {
return {
isHide: true
}
}
}
</script>
<style scoped>
h3 {
background-color: skyblue;
transition: 0.5s linear;
}
/* 当使用transition标签后，transition中元素的显示，vue会加上三个属性v-enter v-enter-active v-enter-to。
元素离开vue会加上三个属性v-leave v-leave-active v-leave-to
v-enter和v-leave在来和离开的瞬间就会消失，所以在控制台中不会观察到class中的这两个属性。
*/
/* 来的起点 */
.v-enter {
transform: translateX(-100%);
}
/* 来的终点 */
.v-enter-to {
transform: translateX(0px);
}
/* 离开的起点 */
.v-leave {
transform: translateX(0px);
}
/* 离开的终点 */
.v-leave-to {
transform: translateX(-100%);
}
/* 来的起点和离开的终点可以定义在一起 */
.hello-enter, .hello-leave-to {
transform: translateX(-100%);
}
.hello-enter-to, .hello-leave {
transform: translateX(0px);
}
/* 如果不想破坏原有的样式，可以将动画的过度时间和速度放在x-x-active中。 */
.hello-enter-active, .hello-leave-active {
transition: 0.5s linear;
}
</style>
4.多个元素的过度
<template>
<div>
<button @click="isHide = !isHide">显示/隐藏</button>
<!-- 多个元素的过度使用transition-group；同时需要给元素需要指定key，否则报错。-->
<transition-group>
<h3 v-show="isHide" key="1">hello</h3>
<h3 v-show="isHide" key="2">hello</h3>
</transition-group>
</div>
</template>
<script>
export default {
name: "MyText",
data() {
return {
isHide: true
}
}
}
</script>
<style scoped>
h3 {
background-color: skyblue;
transition: 0.5s linear;
}
.v-enter {
transform: translateX(-100%);
}
/* 来的终点 */
.v-enter-to {
transform: translateX(0px);
}
/* 离开的起点 */
.v-leave {
transform: translateX(0px);
}
/* 离开的终点 */
.v-leave-to {
transform: translateX(-100%);
}
</style>
5.使用第三方动画库
- 按照第三方动画库，npm i animate.css。
- 引入和使用第三方库。
<!--
1 引入。import 'animate.css'。
2 配置。name="animate__animated animate__bounce"。
3 使用。元素上添加属性：
enter-active-class="animate__swing"，显示的动画；
leave-active-class="animate__backOutUp"，离开的动画。
-->
<template>
<div>
<button @click="isHide = !isHide">显示/隐藏</button>
<transition-group
appear
name="animate__animated animate__bounce"
enter-active-class="animate__swing"
leave-active-class="animate__backOutUp">
<h3 v-show="isHide" key="1">hello</h3>
<h3 v-show="isHide" key="2">hello</h3>
</transition-group>
</div>
</template>
<script>
/* 引入 */
import 'animate.css'
export default {
name: "MyText",
data() {
return {
isHide: true
}
}
}
</script>
<style scoped>
h3 {
background-color: skyblue;
transition: 0.5s linear;
}
</style>
6.vue过度和动画总结
- Vue封装的过度和动画会在插入、更新或者移除DOM元素时，给元素添加样式类型来完成。
- 动画进入和离开图。
- 动画进入的样式。v-enter，进入的起点；v-enter-active，进入的过程；v-enter-to，进入的终点。
- 动画离开的样式。v-leave，离开的起点；v-leave-active，离开的过程；v-leave-to，离开的终点。
- transition包裹需要使用动画的元素；如果有多个元素需要动画可以使用transition-group，并且需要给每个元素指定唯一的key。
7.TodoList案例给MyItem组件添加动画
-
使用transition包裹需要动画的元素。
-
定义进入的样式和离开的样式。
-
MyItem.vue。
<template>
<transition name="todo" appear>
<li>
<label>
<input type="checkbox" :checked="todo.done" @change="handlerChange(todo.id)"/>
<span v-show="!todo.isEdit">{{ todo.name }}</span>
<!-- @blur失去焦点事件。 -->
<input type="text"
v-show="todo.isEdit"
:value="todo.name"
@blur="updateTodo(todo, $event)"
ref="inputName">
</label>
<button class="btn btn-danger" @click="handlerDelete(todo.id)">删除</button>
<button class="btn btn-danger" @click="handlerEdit(todo)">编辑</button>
</li>
</transition>
</template>
<script>
...
</script>
<style scoped>
...
@keyframes demo {
from {
transform: translateX(100%);
}
to{
transform: translateX(0px);
}
}
.todo-enter-active {
animation: demo 1s linear;
}
.todo-leave-active {
animation: demo 1s reverse linear;
}
</style>
浙公网安备 33010602011771号