[动画] 如何利用Vue3制作动画效果
制作一个显示隐藏的切换效果
- 制作一个显示隐藏的切换效果
- 编写CSS样式和制作进入动画
- 编写退出动画
- 总结
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Demo03 data(){ return { isShow:false } }, methods:{ hanldClick(){ this.isShow= !this.isShow } }, template: `
willem
切换动画
` }) const vm = app.mount("#app") 0%{ transform:translateX(-100px) } 100%{ transform:translateX(50px) } } data(){ return { isShow:false } }, methods:{ hanldClick(){ this.isShow= !this.isShow } }, template: `
willem
切换动画
` }) const vm = app.mount("#app") animation: comein 1s; } @keyframes comein{ 0%{ transform:translateX(-100px) } 100%{ transform:translateX(50px) } } 0%{ transform:translateX(50px) } 100%{ transform:translateX(-100px) } }
有了comeout的关键帧CSS，然后又是一个固定写法v-leave-active。
.v-leave-active{
animation : comeout 1s;
}
这时候你再点击按钮，就有了退出动画。
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Demo03 data(){ return { isShow:false } }, methods:{ hanldClick(){ this.isShow= !this.isShow } }, template: `
willem
切换动画
` }) const vm = app.mount("#app") animation : comeout 1s; } @keyframes comeout{ 0%{ transform:translateX(50px) } 100%{ transform:translateX(300px) } }
关注
打赏
![]()
1688896170
查看更多评论
