vue3.0动画渲染技术

太过爱你忘了你带给我的痛 2023-10-01 03:43 12阅读 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)  
动态组件  
组件根节点

。

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 条件渲染与列表渲染

文章目录 * vue 渲染 * * 条件渲染 * * v-if 与 v-else渲染以及 v-show * 列表渲染 ...

清疚/ 2024年04月18日 23:53/ 0 赞/ 125 阅读

相关浏览器渲染过程和CSS动画

动画的原理动画其实是一个人脑的bug，是由很多个静止不同的图片，加速播放，让人看起来是在不停播放的视觉效果动画的定义 1. 由许多静止的画面 (帧) 2...

布满荆棘的人生/ 2024年04月18日 16:53/ 0 赞/ 100 阅读

相关 vue条件渲染和列表渲染

1、条件渲染 1.v-if 写法: (1).v-if="表达式" (2).v-else-if="表达式” (3).v-else="表达式”适用于:切换频率较低的场

怼烎@/ 2023年10月02日 22:16/ 0 赞/ 20 阅读

相关 vue3.0动画渲染技术

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

太过爱你忘了你带给我的痛/ 2023年10月01日 03:43/ 0 赞/ 13 阅读

相关 Javascript高性能动画与页面渲染

No setTimeout, No setInterval 如果你不得不使用setTimeout或者setInterval来实现动画，那么原因只能是你需要精确的控制动画。

以你之姓@/ 2022年06月10日 07:44/ 0 赞/ 248 阅读

相关 Vue_条件渲染和列表渲染

一.条件渲染 1.v-if： v-if=‘name’ ：name值的true 或 false ，决定着这个标签的是否显示 2.v-show： v-show=‘sho

快来打我*/ 2022年05月22日 13:27/ 0 赞/ 322 阅读

相关 vue动画

> 本文中所有的代码会在文末提供下载链接,觉得作者写的还行的话,给个赞把. 概述 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下

ゞ浴缸里的玫瑰/ 2022年03月27日 08:18/ 0 赞/ 357 阅读

相关 iOS 视图、动画渲染机制探究

> 腾讯 Bugly 特约作者：陈向文终端的开发，首当其冲的就是视图、动画的渲染，切换等等。用户使用 App 时最直接的体验就是这个界面好不好看，动画炫不炫，滑动流不流畅。

港控/mmm°/ 2022年02月16日 08:38/ 0 赞/ 291 阅读

相关 vue动画

为什么要有动画：动画能够提高用户的体验，帮助用户更好的理解页面中的功能； v-enter v-enter-active v-enter-to

男娘i/ 2022年01月05日 07:19/ 0 赞/ 337 阅读

相关【Vue】动画

本文笔记基于「千古壹号」的GitHub项目：[https://github.com/qianguyihao/web][https_github.com_qianguyihao_

小灰灰/ 2021年11月10日 09:34/ 0 赞/ 381 阅读