首页 > 其他分享 >Vue3的学习---7

Vue3的学习---7

时间：2024-08-23 15:05:51浏览次数：13  
标签：opacity 学习 translateX 动画 3s enter transform --- Vue3

7. 动画与过渡

动画与过渡的区别：

  • 过渡：主要用于简单的属性变化，从一个状态平滑过渡到另一个状态。
  • 动画：可以定义复杂的关键帧序列，实现更为复杂和多变的动画效果。

7.1 动画

7.1.1 回顾CSS动画

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 定义动画规则 */
        /* @keyframes 是 CSS 中用于定义动画的关键帧规则。boxanimate 是这个动画的名称，可以在其他地方通过这个名称来引用这个动画。 */
        @keyframes boxanimate {
            /* 0% 关键帧：在动画开始时（0%），元素的 transform 属性被设置为 translateX(0)，即元素在水平方向上不移动。 */
            0% {
                transform: translateX(0);
            }
            /* 50% 关键帧：在动画进行到一半时（50%），元素的 transform 属性被设置为 translateX(50px)，即元素在水平方向上向右移动 50 像素。 */
            50% {
                transform: translateX(50px);
            }
            /* 100% 关键帧：在动画结束时（100%），元素的 transform 属性被设置为 translateX(0)，即元素在水平方向上不移动。 */
            100% {
                transform: translateX(0);
            }
        }

        .box {
            /* 用animation样式应用boxanimation规则的动画。该动画在 3 秒钟内使元素在水平方向上从起始位置（0 像素）移动到 50 像素，然后再回到起始位置。 */
            animation: boxanimate 3s;
        }
    </style>
</head>
<body>
    <div class="box">这是会动的文字</div>
</body>
</html>

7.1.2 在Vue中使用CSS动画

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes boxanimation {
            0% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(50px);
            }
            100% {
                transform: translateX(0);
            }
        }

        .box {
            animation: boxanimation 3s;
        }
    </style>
</head>
<body>
    <div id="app">
        <div :class="{box: isAnimation}">这是会动的文字</div>
    </div>

    <script src="../js/vue3.js"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    isAnimation: true
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

7.1.3 用事件控制动画

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes boxanimation {
            0% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(50px);
            }
            100% {
                transform: translateX(0);
            }
        }

        .box {
            animation: boxanimation 3s;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- @mouseover，鼠标移出事件；@mouseout，鼠标移入事件 -->
        <div :class="{box: isAnimation}" @mouseover="over" @mouseout="out">这是会动的文字</div>
    </div>

    <script src="../js/vue3.js"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    isAnimation: false
                }
            },
            methods: {
                over() {
                    this.isAnimation = true
                },
                out() {
                    this.isAnimation = false
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

7.2 过渡

7.2.1 回顾CSS过渡

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            background-color: palegoldenrod;
            /* 过渡样式 */
            transition: 3s;
        }

        .box:hover {
            background-color: paleturquoise;
        }
    </style>
</head>
<body>
    <div class="box">这是会动的文字</div>
</body>

7.2.2 在Vue中实现过渡

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            background-color: palegoldenrod;
            transition: 3s;
        }

        .boxmove {
            background-color: paleturquoise;
        }
    </style>
</head>
<body>
    <div id="app">
        <div :class="{box:true, boxmove:isMove}" @mouseover="over" @mouseout="out">这是会动的文字</div>
    </div>

    <script src="../js/vue3.js"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    isMove: false
                }
            },
            methods: {
                over() {
                    this.isMove = true
                },
                out() {
                    this.isMove = false
                }
            }
        }).mount('#app')
    </script>
</body>

7.3 入场出场的过渡与动画

组件元素的显示叫入场，如果带动画就叫入场动画；组件元素的隐藏叫出场，如果有动画就叫出场动画。

7.3.1 过渡型入场出场

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 入场动画的开始状态样式 */
        .v-enter-from {
            opacity: 0;
        }
        /* 入场动画的结束状态样式 */
        .v-enter-to {
            opacity: 1;
        }
        /* 入场动画如何过渡 */
        .v-enter-active {
            transition: opacity 3s;
        }

        /* 出场动画的开始状态样式 */
        .v-leave-from {
            opacity: 1;
        }

        /* 场出动画的结束状态样式 */
        .v-leave-to {
            opacity: 0;
        }

        /* 出场动画如何过渡 */
        .v-leave-active {
            transition: opacity 3s;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="change">改变</button><br>
        <!-- 使用transition标签将需要动画的组件包裹 -->
        <transition>
            <child v-if="isShow"></child>
        </transition>

    </div>

    <script src="../js/vue3.js"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    isShow: false
                }
            },
            components: {
                child: {
                    template: `<div>我是子组件</div>`
                }
            },
            methods: {
                change() {
                    this.isShow = !this.isShow
                }
            }
        }).mount('#app')
    </script>
</body>

7.3.2 动画型入场出场

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 入场动画关键帧 */
        @keyframes enter {
            0% {
                transform: translateX(-100px)
            }
            100% {
                transform: translateX(0)
            }
        }

        /* 出场动画关键帧 */
        @keyframes leave {
            0% {
                transform: translateX(0)
            }
            100% {
                transform: translateX(-100px)
            }
        }

        .v-enter-active {
            animation: enter 3s;
        }

        .v-leave-active {
            animation: leave 3s;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="change">改变</button><br>
        <transition>
            <child v-if="isShow"></child>
        </transition>

    </div>

    <script src="../js/vue3.js"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    isShow: false
                }
            },
            components: {
                child: {
                    template: `<div>我是子组件</div>`
                }
            },
            methods: {
                change() {
                    this.isShow = !this.isShow
                }
            }
        }).mount('#app')
    </script>
</body>

7.3.3 实现混合效果

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .v-enter-from {
            opacity: 0;
        }

        .v-enter-to {
            opacity: 1;
        }

        .v-leave-to {
            opacity: 0;
        }

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

            100% {
                transform: translateX(0)
            }
        }

        @keyframes leave {
            0% {
                transform: translateX(0)
            }

            100% {
                transform: translateX(-100px)
            }
        }

        .v-enter-active {
            animation: enter 3s;
            transition: opacity 3s;
        }

        .v-leave-active {
            animation: leave 3s;
            transition: opacity 3s;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="change">改变</button><br>
        <transition>
            <child v-if="isShow"></child>
        </transition>

    </div>

    <script src="../js/vue3.js"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    isShow: false
                }
            },
            components: {
                child: {
                    template: `<div>我是子组件</div>`
                }
            },
            methods: {
                change() {
                    this.isShow = !this.isShow
                }
            }
        }).mount('#app')
    </script>
</body>

7.3.4 列表动画

上面实例都是对单元素的入场与出场，但实际开发中很多时候都需要使用多元素（比如：列表）。那么Vue也封装了多元素的入场与出场。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes enter {
            0% {
                transform: translateX(-100px)
            }

            100% {
                transform: translateX(0)
            }
        }

        .v-enter-active {
            animation: enter 0.5s;
        }

        /* 多元素动画时，其他元素有动作时的动画 */
        .v-move {
            transition: all 0.5s;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="add">添加</button><br>
        <ul>
            <transition-group>
                <li v-for="item in arr" :key="item">{{item}}</li>
            </transition-group>
        </ul>
    </div>

    <script src="../js/vue3.js"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    arr: []
                }
            },
            methods: {
                add() {
                    this.arr.unshift(this.arr.length + 1)
                }
            }
        }).mount('#app')
    </script>
</body>

标签：opacity,学习,translateX,动画,3s,enter,transform,---,Vue3
From： https://www.cnblogs.com/yishengwanwuzhao/p/18376021

相关文章

  • 小朋友学C++-题集
    小朋友学C++参考c语言基础啊哈C语言书籍算法图解-python.pdfc语言教程在线C++/C/python编译器C语言基础==========================C语言精读100例！！！！C语言实验指导与习题解答小项目学习扫雷小游戏贪吃蛇小游戏学生成绩管理系统图书管理系统小说分析软件第一章，与......
  • ctfhub-rce-部分做题记录
    命令注入检查网页显示内容，可以直接看到源代码。大致意思是：检查用户输入的GET请求，判断用户是否输入了ip信息。如果输入了ip信息，则使用用户输入的这个ip数据执行一个shell命令"ping-c4"。输入127.0.0.1;cat104211044913917.php没回显，查看源代码过滤cat输入......
  • MBR40200PT-ASEMI无人机专用MBR40200PT
    编辑：llMBR40200PT-ASEMI无人机专用MBR40200PT型号：MBR40200PT品牌：ASEMI封装：TO-247批号：最新最大平均正向电流（IF）：40A最大循环峰值反向电压（VRRM）：200V最大正向电压（VF）：0.70V~0..90V工作温度：-65°C~175°C反向恢复时间：35ns芯片个数：2芯片尺寸：74mil引脚数量：3正向浪涌电流（IFMS）：350......
  • Android Qcom USB Driver学习(八)
    因为要看usbcharging的问题，所以需要补充一下battery的相关知识，算是入门吧BATSCH(1)VBATT_VSNS_P(2)BAT_THERM(3)I2C_SDA(4)I2C_SCL(5)VBATT_VSNS_Msbl1_hw_pre_ddr_init:(1)pm_device_init(2)pm_driver_init(3)pm_sbl_chg_init(1)pm_device_init没有研究过，也是......
  • [每周一更]-(第111期)：从零开始：如何在 CentOS 上源码编译安装 PHP 7.4
    文章目录系统信息：0、安装版本：1、下载/解压2、安装依赖3、配置autoconf4、配置参数5、编译和安装6、验证安装的插件6.1、配置php.ini6.2、配置opcache7、错误7.1Failedtoconnectto2a03:2880:f10e:83:face:b00c:0:25de:Networkisunreachable7.1.1禁用yum使用I......
  • 一文带你读懂vue3中directive指令的那些事
    概述vue3中内置了很多丰富实用的指令，如v-show、v-if/v-else或v-model等，但是实际开发中可能我们还需要某些统一的处理，比如交互按钮的防抖，输入框的自动focus等，这时我们就可以通过vue3的directive注册自定义指令。指令指令钩子vue3的自定义指令通常情况下是由一个包含类似......
  • 开源模型应用落地-qwen2-7b-instruct-LoRA微调-LLaMA-Factory-单机单卡-V100（八）
    一、前言  本篇文章将使用LLaMA-Factory去高效微调（命令和界面方式）QWen2系列模型，通过阅读本文，您将能够更好地掌握这些关键技术，理解其中的关键技术要点，并应用于自己的项目中。二、术语介绍2.1.LoRA微调  LoRA(Low-RankAdaptation)用于微调大型语言模型(LLM)。......
  • Linux系统性能调优指南-监控与报警
    目录监控与报警实时监控示例示例代码Nagios配置示例监控与报警在Linux系统中，持续监控系统资源使用情况并及时发现潜在问题是保证系统稳定运行的关键。下面将详细介绍如何使用Nagios和Zabbix等工具来实现监控与报警功能。实时监控Nagios和Zabbix是两种非常流行的......
  • python 基础语法学习
    1.IPO程序编写方法inputprocessoutput2.ord("北")字符转uncode码chr(21271)uncode码转字符3.文件写入fp=open('node.txt','w')print('北京欢迎你',file=fp)fp.close()4.键盘输入name=input("请输入您的姓名：")......
  • Ctfhub-SSRF部分做题记录
    Ctfhub-SSRF部分做题记录上传文件提示：这次需要上传一个文件到flag.php了.祝你好运进入flag.php发现没有提交按钮修改源代码，加个提交按钮抓包修改host为127.0.0.1:80，乱码改成1111(随便，只要不是乱码)PHPimporturllib.parsepayload=\"""POST/flag.phpHTTP/1.1Host......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99