首页 > 编程学习 > Vue2基础篇-32-过度与动画

Vue2基础篇-32-过度与动画

发布时间:2022/12/10 17:40:36

1. 简介

作用:在插入、更新或移除 DOM元素时,在合适的时候给元素添加样式类名。

写法:

  1. 准备好样式:

    • 元素进入的样式:
      1. v-enter:进入的起点
      2. v-enter-active:进入过程中
      3. v-enter-to:进入的终点
    • 元素离开的样式:
      1. v-leave:离开的起点
      2. v-leave-active:离开过程中
      3. v-leave-to:离开的终点
  2. 使用<transition>包裹要过度的元素,并配置name属性:

    <transition name="hello"><h1 v-show="isShow">你好啊!</h1>
    </transition>
    
  3. 备注:若有多个元素需要过度,则需要使用:<transition-group>,且每个元素都要指定key值。

2. demo

demo1

<template><div><button @click="isShow = !isShow">显示/隐藏</button><!-- 动画效果需要使用vue提供的transition包裹,但是样式的名字必须使用它自带的 .v-enter-active 和.v-leave-active 当然你也可以自己取名字,比如取名字为test01,那么样式名字变成 .test01-enter-active 和.test01-leave-active--><transition name="test01"><h1 v-show="isShow">你好啊</h1></transition></div>
</template><script>
export default {name: "Test",data() {return {isShow: true,};},
};
</script><style scoped>
h1 {background-color: orange;
}/* 来 linear表示是否匀速 */
.test01-enter-active {animation: atDingDong 1s linear;
}/* 走,然后反转 */
.test01-leave-active {animation: atDingDong 1s linear reverse;
}/* 动画就得定义一个 @keyframes  */
@keyframes atDingDong {/* 来的动画 */from {transform: translateX(-100%);}to {transform: translateX(0px);}
}
</style>

demo2

<template><div><button @click="isShow = !isShow">显示/隐藏</button><!-- 使用过渡效果实现 --><transition name="test02"><h1 v-show="isShow">你好啊</h1></transition></div>
</template><script>
export default {name: "Test2",data() {return {isShow: true,};},
};
</script><style scoped>
h1 {background-color: orange;
}/* 进入的起点,离开的终点 */
.test02-enter,
.test02-leave-to {transform: translateX(-100%);
}/* 进入的终点,离开的起点 */
.test02-enter-to,
.test02-leave {transform: translateX(0);
}/* 中间过渡的效果 */
.test02-enter-active,
.test02-leave-active {transition: 0.5s linear;
}/* vue给我们在起点和终点各提供了三个样式进入的起点: .test01-enter,
进入的终点: .test01-enter-to
进入期间的效果(时间/是否加速): .test01-enter-active离开的起点: .test01-leave,
离开的终点: .test01-leave-to
离开期间的效果(时间/是否加速): .test01-leave-active*/
</style>

demo3

<template><div><button @click="isShow = !isShow">显示/隐藏</button><!-- 如果是列表 --><transition-group name="test03"><h1 v-show="isShow" key="1">你好啊1111</h1><h1 v-show="isShow" key="2">你好啊2222</h1></transition-group></div>
</template><script>
export default {name: "Test3",data() {return {isShow: true,};},
};
</script><style scoped>
h1 {background-color: orange;
}/* 进入的起点,离开的终点 */
.test03-enter,
.test03-leave-to {transform: translateX(-100%);
}/* 进入的终点,离开的起点 */
.test03-enter-to,
.test03-leave {transform: translateX(0);
}/* 中间过渡的效果 */
.test03-enter-active,
.test03-leave-active {transition: 0.5s linear;
}/* vue给我们在起点和终点各提供了三个样式进入的起点: .test01-enter,
进入的终点: .test01-enter-to
进入期间的效果(时间/是否加速): .test01-enter-active离开的起点: .test01-leave,
离开的终点: .test01-leave-to
离开期间的效果(时间/是否加速): .test01-leave-active*/
</style>

demo4

<template><div><button @click="isShow = !isShow">显示/隐藏</button><transition-groupappearname="animate__animated animate__bounce"enter-active-class="animate__backInDown"leave-active-class="animate__backOutUp"><h1 v-show="isShow" key="1">你好啊1111</h1><h1 v-show="isShow" key="2">你好啊2222</h1></transition-group></div>
</template><script>
/* 由于引入的是样式,不需要跟js那样 import xxx from xxx 这种*/
import "animate.css";export default {name: "Test5",data() {return {isShow: true,};},
};
</script><style scoped>
h1 {background-color: orange;
}
</style>

本文链接:https://www.ngui.cc/article/show-747546.html
Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000