当我们了解用 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，用来控制元素的显示和隐藏。
这步编写完成可以到浏览器中查看一下效果。主要查看一下点击按钮是否可以实现文字的显示和隐藏。如果能正常控制，说明代码没有错误。就可以继续向下学习了。
![39. [动画]如何利用Vue3制作动画效果 1](/d/file/webqianduan/f2w1g5m3sd5f2w1g5m3sd5.gif "39. [动画]如何利用Vue3制作动画效果 1")
最后附上完整代码，帮助大家学习：
<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 中的单个元素进入动画效果的制作，但是看起来还动画效果比较硬，没关系，下节我们再学习一下单个元素过渡效果的制作。