39. [动画]如何利用Vue3制作动画效果

目录
文章目录隐藏
  1. 制作一个显示隐藏的切换效果
  2. 编写 CSS 样式和制作进入动画
  3. 编写退出动画
  4. 总结

当我们了解用 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,用来控制元素的显示和隐藏。

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

如何利用 Vue3 制作动画效果

编写 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 中的单个元素进入动画效果的制作,但是看起来还动画效果比较硬,没关系,下节我们再学习一下单个元素过渡效果的制作。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 39. [动画]如何利用Vue3制作动画效果

发表回复