• Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第4章 Vue.js动画 4.1 Vue单组动画

    Vue.js核心技术解析与uni-app跨平台实战开发学习笔记

    第4章 Vue.js动画

    文章目录

    4.1 Vue单组动画

    Vue中的动画和CSS3中的动画不同，Vue的动画主要用于增加页面交互性，提升用户体验【例如一些淡入、淡出的简单效果，不适合做复杂的动画特效】

    Vue.js官方文档

    https://v2.cn.vuejs.org/v2/guide/transitions.html

    在这里插入图片描述

    这是一个完整的动画执行过程，Enter是入场动画，Leave是离场动画。

    4.1.1 Enter进场动画

    在这里插入图片描述

    入场动画有两个时间点，即v-enter和v-enter-to，表示透明度从0到1的转换。

    v-enter时间点表示动画进入之前的起始状态。

    v-enter-to时间点表示动画进入之后的状态。

    从起始状态到结束状态需要一定的时间，这个时间段就是v-enter-active。

    4.1.2 Leave离场动画

    在这里插入图片描述

    离场动画同样有两个时间点和一个时间段，表示透明度从1到0的转换。

    v-leave表示离开之前的状态。

    v-leave-to表示离开之后的状态。

    v-leave-active表示时间段。

    4.1.3 举个栗子

    单击按钮，控制元素的显示和隐藏。

    在这里插入图片描述

    这是以前做过的版本，点击按钮，内容直接消失，再点，立即出现，很突兀。

    加上动画效果：

    使用Vue动画的两个步骤：

    • 用transition标签包裹需要添加动画的元素
    • 添加两组CSS样式
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Documenttitle>

    <style>
        /* 两个时间点 */
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateX(100px);
        }

        .v-enter-active,
        .v-leave-active{
            transition: all 1s ease;
        }
    style>

head>
<body>

<div id="app" v-cloak>
    <input type="button" value="toggle" @click="toggleFn">
    <transition>
        <div v-if="flag">
            <h1>Helloh1>
        div>
    transition>
div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: "Hello world",
            flag: true
        },
        methods: {
            toggleFn() {
                this.flag = !this.flag
            }
        }
    })
script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51

    在这里插入图片描述

    运行效果

    在这里插入图片描述

    进入之后的样式不考虑，进入之前和离开之前的状态是一样的，透明度为0，opacity: 0;

  • 相关阅读:
    Kafka--Rebalance重平衡
    颜色代码 颜色卡
    2023最新SSM计算机毕业设计选题大全（附源码+LW）之java双笙映画ou5oj
    第14章总结：lambda表达式与处理
    离线学习(岭回归)
    数字藏品系统开发，基于区块链智能合约技术
    pm2 运行springboot项目
    Vue实现打印功能（vue-print-nb）
    【C++】入门（上）
    MySQL数据库
  • 原文地址：https://blog.csdn.net/weixin_44226181/article/details/126566258