码云 39. [动画]如何利用Vue3制作动画效果
当我们了解用 CSS 配合 Vue 来制作动画和过渡效果后，本文我们讲一下如何利用 Vue3 制作的动画效果。从代码效果上，会比以前的代码有所精简。
制作一个显示隐藏的切换效果
新建一个文件Demo39.html，然后复制Base.html代码到Demo39.html中。有了基础代码后，现在要作的需求就是让模板中的码云笔记前端博客这几个字可以用按钮控制显示和隐藏。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo03</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return {
isShow:false
}
},
methods:{
hanldClick(){
this.isShow= !this.isShow
}
},
template: `
<div v-if="isShow">码云笔记前端博客</div>
<div><button @click="hanldClick">切换动画</button></div>
`
})
const vm = app.mount("#app")
</script>
上面的代码中我们先写了一个按钮，然后按钮绑定hanldClick方法，要控制DOM元素的显示和隐藏，这里我使用了v-if。还需要一个数据项，我定义为了isShow，用来控制元素的显示和隐藏。
这步编写完成可以到浏览器中查看一下效果。主要查看一下点击按钮是否可以实现文字的显示和隐藏。如果能正常控制，说明代码没有错误。就可以继续向下学习了。
编写 CSS 样式和制作进入动画
我们编写动画，同样需要编写 CSS 样式，并且这些 CSS 样式有固定的名称，你需要符合这些名称规则来进行编写。
先来写一个关键帧动画, 这个关键帧动画作了从左侧位移到屏幕中的效果，
<style>
@keyframes comein{
0%{
transform:translateX(-100px)
}
100%{
transform:translateX(50px)
}
}
</style>
然后需要写一个固定的 CSS 样式写法v-enter-active意思是进入是采用何种动画方式，我们直接用animation调用这个动画就可以了。
.v-enter-active{
animation: comein 1s;
}
现在还是没有动画效果的，你还需要给动画的 DOM 元素加上<transition>标签。
template: `
<transition>
<div v-if="isShow">码云笔记前端博客</div>
</transition>
<div><button @click="hanldClick">切换动画</button></div>
`
编写退出动画
现在已经有了元素进入动画，但是退出时还没有退出动画，所以，我们需要制作一个退出动画。过程和上面的方法类似。先编写 CSS 样式。
@keyframes comeout{
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>Mybj</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return {
isShow:false
}
},
methods:{
hanldClick(){
this.isShow= !this.isShow
}
},
template: `
<transition>
<div v-if="isShow">码云笔记前端博客</div>
</transition>
<div><button @click="hanldClick">切换动画</button></div>
`
})
const vm = app.mount("#app")
</script>
<style>
@keyframes comein{
0%{
transform:translateX(-100px)
}
100%{
transform:translateX(50px)
}
}
.v-enter-active{
animation: comein 1s;
}
@keyframes comeout{
0%{
transform:translateX(50px)
}
100%{
transform:translateX(-100px)
}
}
.v-leave-active{
animation : comeout 1s;
}
</style>
总结
以上就是本文的主要内容，我们学习了 Vue3 中的单个元素进入动画效果的制作，但是看起来还动画效果比较硬，没关系，下节我们再学习一下单个元素过渡效果的制作。
以上关于39. [动画]如何利用Vue3制作动画效果的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 39. [动画]如何利用Vue3制作动画效果
