Vue动画之transition和keyframes关键帧动画
程序员文章站
2024-03-25 12:42:52
...
1.实现keyframes关键帧动画效果
利用data控制类名来控制过渡效果。
<style>
@keyframes leftToRight {
0% {
transform: translateX(-100px);
}
50% {
transform: translateX(-50px);
}
100% {
transform: translateX(0px);
}
}
//给animation类名加上动画效果
.animation {
animation: leftToRight 3s;
}
</style>
const app = Vue.createApp({
data(){
return {
animate:{
animation:false
}
},
methods:{
handleClick(){
//切换动画效果的显示
this.animate.animation = this.animate.animation
}
},
template:`
<div>
//通过对象里面的类名决定是否加载动画效果
<div :class="animate">HelloWorld</div>
<div @click="handleClick">切换</div>
</div>
`
})
2.实现transition 过渡效果
利用data控制类名来控制过渡效果。
<style>
.transition {
transition: 3s background-color ease;
}
.blue {
background: blue;
}
.green {
background: green;
}
</style>
const app = Vue.createApp({
data(){
return {
animate:{
transition:true,
green:true,
blue:false
}
}
},
methods:{
handleClick(){
//控制data对象中的类名来控制样式
this.animate.animation = !this.animate.animation;
this.animate.blue = !this.animate.blue;
this.animate.green = !this.animate.green;
}
},
template:`
<div>
<div :class="animate">
hello world
</div>
<button @click="handleClick">切换</button>
</div>
`
})
3.通过style来控制transition效果
const app = Vue.createApp({
data(){
return {
styleObj: {
background: "blue",
},
}
},
methods: {
handleClick() {
//手动切换data里面的styleobj的样式 这样不用在<style></style>里面写样式
if (this.styleObj.background === "blue") {
this.styleObj.background = "green";
} else {
this.styleObj.background = "blue";
}
},
},
template: `
<div>
<div :class="transition" :style="styleObj">
hello world
</div>
<button @click="handleClick">切换</button>
</div>
`,
})
上一篇: # Android动画笔记
下一篇: iOS 动画笔记