39 制作一个显示隐藏的切换动画效果

朴灿烈づ我的快乐病毒、 2023-10-06 20:41 18阅读 0赞

#### \[动画\] 如何利用Vue3制作动画效果 ####

*  制作一个显示隐藏的切换效果
 *  编写CSS样式和制作进入动画
 *  编写退出动画
 *  总结

## 制作一个显示隐藏的切换效果 ##

上面的代码中我们先写了一个按钮，然后按钮绑定 `hanldClick` 方法，要控制DOM元素的显示和隐藏，这里我使用了 `v-if` 。

还需要一个数据项，我定义为了`isShow`，用来控制元素的显示和隐藏。

这步编写完成可以到浏览器中查看一下效果。  
主要查看一下点击按钮是否可以实现文字的显示和隐藏。如果能正常控制，说明代码没有错误。就可以继续向下学习了。

![在这里插入图片描述][174f4dc5614d4f999e85f4112a23a6b5.gif_pic_center]

## 编写CSS样式和制作进入动画 ##

我们编写动画，同样需要编写CSS样式，并且这些CSS样式有固定的名称，你需要符合这些名称规则来进行编写。

先来写一个关键帧动画, 这个关键帧动画作了从左侧位移到屏幕中的效果，

然后需要写一个固定的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>
    `

![在这里插入图片描述][f9fd97bf074d4b859007404efb2a158f.gif_pic_center]

<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: `
                <transition>
                    <div v-if="isShow">willem</div>
                </transition>
                <div><button @click="hanldClick">切换动画</button></div>
            `
        })
        const vm = app.mount("#app")
    </script>
    <style>
        .v-enter-active{
          
            animation: comein 1s;
        }
        @keyframes comein{
          
            0%{
          
                transform:translateX(-100px)
            }
            100%{
          
                transform:translateX(50px)
            }
        }
    
    </style>
    </html>

## 编写退出动画 ##

现在已经有了元素进入动画，但是退出时还没有退出动画，所以，我们需要制作一个退出动画。过程和上面的方法类似。

先编写CSS样式。

@keyframes comeout{
        
        0%{
        
            transform:translateX(50px)
        }
        100%{
        
            transform:translateX(-100px)
        }
    }

有了 `comeout` 的关键帧CSS，然后又是一个固定写法 `v-leave-active`。

.v-leave-active{
        animation : comeout 1s;
    }

这时候你再点击按钮，就有了退出动画。

![在这里插入图片描述][5b50fb0091f04ff49ad4086ea6852437.gif_pic_center]

<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: `
                <transition>
                    <div v-if="isShow">willem</div>
                </transition>
                <div><button @click="hanldClick">切换动画</button></div>
            `
        })
        const vm = app.mount("#app")
    </script>
    <style>
    .v-leave-active{
          
        animation : comeout 1s;
    }
    @keyframes comeout{
          
        0%{
          
            transform:translateX(50px)
        }
        100%{
          
            transform:translateX(300px)
        }
    }
    </style>
    </html>

## 总结 ##

以上就是本文的主要内容，我们学习了Vue3中的单个元素进入动画效果的制作，但是看起来还动画效果比较硬，没关系，下节我们再学习一下单个元素过渡效果的制作。

[174f4dc5614d4f999e85f4112a23a6b5.gif_pic_center]: https://img-blog.csdnimg.cn/174f4dc5614d4f999e85f4112a23a6b5.gif#pic_center
[f9fd97bf074d4b859007404efb2a158f.gif_pic_center]: https://img-blog.csdnimg.cn/f9fd97bf074d4b859007404efb2a158f.gif#pic_center
[5b50fb0091f04ff49ad4086ea6852437.gif_pic_center]: https://img-blog.csdnimg.cn/5b50fb0091f04ff49ad4086ea6852437.gif#pic_center