1.通过添加或删除 类名/行内样式 来实现css做动画或过渡效果:
<style>
@keyframes leftToRight{
from{
transform: translateX(-100px);
}
to{
transform: translateX(0px);
}
}
.animation{
animation: leftToRight 1s;
}
.transition{
transition: all 3s;
}
.colorChange{
color:green;
}
</style>
<script>
// 通过添加或删除类名来实现css做动画或过渡效果
const app = Vue.createApp({
data() {
return {
animate:{
// 属性值为true则被选择
animation:true,
transition:true,
colorChange:false,
},
// 行内样式
styleObj:{
background:"yellow",
}
}
},
methods: {
changeColor(){
// 文字颜色切换过渡效果
this.animate.colorChange = !this.animate.colorChange;
// 背景颜色切换过渡效果
if(this.styleObj.background === "yellow"){
this.styleObj.background = "pink"
}else{
this.styleObj.background = "yellow"
}
}
},
template:`
<div :class="animate" :style="styleObj">hello word</div>
<button @click="changeColor">切换</button>`
});
app.mount("#root");
</script>
2.使用vue的动画封装:transition来实现动画效果：
<style>
@keyframes sharkIn{
from{
transform: translateX(-30px);
}
to{
transform: translateX(0);
}
}
@keyframes sharkOut{
from{
transform: translateX(0);
}
to{
transform: translateX(-30px);
}
}
/* 配合transition标签写一些样式 */
.v-enter-from,.v-leave-to{
opacity: 0;
color: green;
}
/* .v-enter-active是在整个进入动画过程的效果的样式*/
.v-enter-active{
animation: sharkIn 2s;
transition: all 2s;
}
.v-leave-active{
animation: sharkOut 2s;
transition: all 2s;
}
.v-enter-to, .v-leave-from{
opacity: 1;
color: red;
}
</style>
<script>
// 单元素/单组件的入场出场动画
const app = Vue.createApp({
data() {
return {
show:true,
}
},
methods: {
handleClick(){
this.show = !this.show;
}
},
// 使用<transition>标签将要做动画的元素包裹
// 修改类名和自定义类名：
// 1.<transition name="x">,则相应的样式的类名要从v-开头改为x-开头；
// 2.<transition enter-active-class="ea">,则样式中的.v-enter-active就要写成.ea
// 自定义类名的好处：方便引用第三方动画
// type="transition"的意思是：
// 如果执行过程中，动画和过渡时间不一致，则以过渡为标准同时结束。
// :duration="1000" 意思是：
// 过渡和动画都以duration规定的时间（毫秒）为标准同时结束。
template:`
<transition type="transition" :duration="{enter:1000,leave:3000}">
<div v-if="show">hello-word</div>
</transition>
<button @click="handleClick">切换</button>`
});
app.mount("#root");
</script>
引入第三方动画库配合transition标签来实现动画效果：
<!-- 引入第三方css库 -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<script>
// 使用vue的动画封装:transition来实现动画效果
// 单元素/单组件的入场出场动画
const app = Vue.createApp({
data() {
return {
show:true,
}
},
methods: {
handleClick(){
this.show = !this.show;
}
},
// 使用<transition>标签将要做动画的元素包裹
// <transition appear>表示第一次进入也有特效
// 修改类名和自定义类名：
// 1.<transition name="x">,则相应的样式的类名要从v-开头改为x-开头；
// 2.<transition enter-active-class="ea">,则样式中的.v-enter-active就要写成.ea
// 自定义类名的好处：方便引用第三方动画
template:`
<transition enter-active-class="animate__animated animate__bounce"
leave-active-class="animate__animated animate__flash">
<div v-if="show">hello-word</div>
</transition>
<button @click="handleClick">切换</button>`
});
app.mount("#root");
</script>
3.在Vue中使用JS做动画：
<script>
const app = Vue.createApp({
data() {
return {
show:true,
}
},
methods: {
handleClick(){
this.show = !this.show;
},
handleBeforeEnter(el){
el.style.color = "green";
},
// el是Dom元素，done是告知vue动画已完成的函数。
handleEnter(el,done){
const itv = setInterval(() => {
if(el.style.color == "green"){
el.style.color = "red";
}else{
el.style.color = "green";
}
}, 1000);
setTimeout(() => {
clearInterval(itv);
done();
}, 5000);
},
// handleAfterEnter是钩子@after-enter的时间处理函数，
// 只有done被调用以后才会自动执行
handleAfterEnter(){
alert("123");
}
},
// :css="false"是禁用css做动画过渡效果
// 使用Js做动画：调用js的钩子（与生命周期函数相似，都会在某一时刻自动执行）
// 有哪些钩子？：@before-enter、@enter、 @after-enter
// 有哪些钩子？：@before-leave、@leave、 @after-leave
template:`
<transition :css="false"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter">
<div v-if="show">hello-word</div>
</transition>
<button @click="handleClick">切换</button>`
});
app.mount("#root");
</script>
多个单元素标签之间切换、多个单组件之间切换：
<style>
@keyframes sharkIn{
from{
transform: translateX(-30px);
}
to{
transform: translateX(0);
}
}
@keyframes sharkOut{
from{
transform: translateX(0);
}
to{
transform: translateX(-30px);
}
}
/* 配合transition标签写一些样式 */
.v-enter-from,.v-leave-to{
opacity: 0;
color: green;
}
/* .v-enter-active是在整个进入动画过程的效果的样式*/
.v-enter-active{
transition: all 2s;
animation: sharkIn 10s;
}
.v-leave-active{
transition: all 2s;
animation: sharkOut 2s;
}
.v-enter-to, .v-leave-from{
opacity: 1;
color: red;
}
</style>
<script>
// 多个单元素标签之间切换
// 多个单组件之间切换
const componentA = {
template:`<div>componentA</div>`
};
const componentB = {
template:`<div>componentB</div>`
};
const app = Vue.createApp({
components:{
componentA,
componentB
},
data() {
return {
show:true,
component: "component-a"
}
},
methods: {
// handleClick(){
// this.show = !this.show;
// }
handleClick(){
this.component = this.component==="component-a"?
"component-b":"component-a"
}
},
// appear表示第一次出现也有进入特效
// mode="out-in"表示先出再入，"in-out"先入再出，不写默认同时出入
// template:`
// <transition appear mode="out-in">
// <div v-if="show">hello</div>
// <div v-else="show">word</div>
// </transition>
// 结合component切换组件，实现特效
template:`
<div>
<transition appear mode="out-in">
<component :is="component"/>
</transition>
<button @click="handleClick">切换</button>
</div>`
});
app.mount("#root")
</script>
列表动画：
<style>
/* v-move让其他元素在移动过程中也有动画过渡效果 */
.v-move{
transition: all 1s;
}
</style>
<!-- 引入第三方css库 -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<script>
// 列表动画
const app = Vue.createApp({
data() {
return {
list:[1,2,3]
}
},
methods: {
add(){
this.list.unshift(this.list.length+1)
},
decent(){
this.list.pop(0)
}
},
template:`
<div>
<transition-group appear
enter-active-class="animate__animated animate__bounce"
leave-active-class="animate__animated animate__flash">
<span class="list" v-for="item in list" :key="item">{{item}}</span>
</transition-group>
<button @click="add">增加</button>
<button @click="decent">减少</button>
</div>`
});
app.mount("#root");
</script>
状态动画是通过控制数据的变化产生一种视觉上的动画效果。?
|