vue3.0js 动画效果渲染技术

张哥编程

发布于 2024-12-19 08:46:53

54400

代码可运行

运行总次数：0

代码可运行

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制p元素显示和隐藏</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app">
        <button @click="show=!show">
            上西天
        </button>
        <p v-if="!show">野火烧不尽</p>
        <p v-if="!show">芳草碧连天</p>
    </div>
    <script>
        //创建一个应用程序实例
        const vm = Vue.createApp({
            //该函数返回数据对象;
            data() {
                return {
                    show: true
                }
            }
        }).mount('#app');
        //在指定的元素上装载应用程序的根组件;
    </script>
</body>

</html>

没有动画的情况下，整个内容的显示和隐藏会非常的生硬：如果我们希望给单元素或者组件实现过渡动画，可以使用 transition 内置组件来完成动画； Vue的transition动画 Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡：条件渲染 (使用 v-if)、条件展示 (使用 v-show) 动态组件组件根节点。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-02-04，如有侵权请联系 cloudcommunity@tencent.com 删除