VUE：过渡&动画

vue动画的理解

1）操作css的 trasition 或 animation

2）vue会给目标元素添加/移除特定的class

3）过渡的相关类名

　　xxx-enter-active：指定显示的transition

　　xxx-leave-active：指定隐藏的transition

　　xxx-enter/xxx-leave-to：指定隐藏时的样式

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>10_过渡&动画</title>

        <style>

            /* 显示或隐藏的过滤效果 */

            .xxx-enter-active,.xxx-leave-active{

                transition: opacity 1s;

            }

            /* 隐藏时的样式 */

            .xxx-enter,.xxx-leave-to{

                opacity: 0;

            }

            /* 显示的过滤效果 */

            .move-enter-active{

                transition: all 1s;

            }

            /* 隐藏的过滤效果 */

            .move-leave-active{

                transition: all 3s;

            }

            /* 隐藏时的样式 */

            .move-enter,.move-leave-to{

                opacity: 0;

                transform: translateX(20px);

            }

        </style>

    </head>

    <body>

        <!--

            1.vue动画的理解

                操作css的trasition或animation

                vueh会给目标元素添加/移除特定的class

            2.基本过渡动画的编码

                1）在目标元素外包裹<transition name="xxx"></transition>

                2）定义class样式

                    1>.指定过渡样式:transition

                    2>.指定隐藏时的样式:opacity/其他

                3）过渡的类名

                    xxx-enter-active：指定显示的transition

                    xxx-leave-active：指定隐藏的transition

                    xxx-enter：指定隐藏时的样式

        -->

        <div id="test1">

            <button @click="isShow=!isShow">toggle</button>

            <transition name='xxx'>

                <p v-show="isShow">hello</p>

            </transition>

        </div>

        <div id="test2">

            <button @click="isShow=!isShow">toggle</button>

            <transition name='move'>

                <p v-show="isShow">hello</p>

            </transition>

        </div>

        <script type="text/javascript" src="../js/vue.js" ></script>

        <script>

            new Vue({

                el:'#test1',

                data(){

                    return {

                        isShow:true

                    }

                }

            })

            new Vue({

                el:'#test2',

                data(){

                    return {

                        isShow:true

                    }

                }

            })

        </script>

    </body>

</html>

VUE：过渡&动画的更多相关文章

  1. vue过渡动画

    概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...

  2. Vue过渡动画—Vue学习笔记

    要求:要通过Vue使用过渡动画我们要把需要过度的元素放在<transition name='变量名'></transition>中. 原理:通过在特定的时刻增加/移除样式实现. ...

  3. vue过渡动画效果

    1 过渡基础 1.1 过渡的方式 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS ...

  4. vue过渡 & 动画---进入/离开 & 列表过渡

    (1)概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animat ...

  5. Vue过渡动画运用transition

    vue的过渡动画,主要是transition标签的使用,配合css动画实现的.官方文档css过渡 通过点击事件来切换show的值来改变显示的文本,下面的css通过进入离开时的在匀速状态下xxs(秒)下 ...

  6. Vue.js 第3章 axios&Vue过渡动画

    promise 它将我们从回调地狱中解脱出来 创建和使用 var fs = require('fs') // 创建promise // reslove表示执行成功后调用的回调函数 // reject表 ...

  7. vue 过渡 & 动画

    过渡 & 动画 过渡动画 用css先定义好动画效果 .a-enter-active, .a-leave-active { transition: all 1.5s; } .a-enter, . ...

  8. （学习心路历程）Vue过渡/动画 VS. 过渡/动画

    [此篇为本人的个人见解和哔哔赖赖,如果有观点不对的地方,还请大家指出来哇!!] 最近实习在做一个项目,里面应用的动画效果还蛮复杂的,因为本身对Vue框架比较熟悉,所以最终选择了Vue框架. 自己之前从 ...

  9. vue过渡动画样式

    在进入/离开的过渡中,会有 6 个 class 切换. v-enter:定义进入过渡的开始状态.在元素被插入之前生效,在元素被插入之后的下一帧移除. v-enter-active:定义进入过渡生效时的 ...

  10. [原]浅谈vue过渡动画,简单易懂

    在vue中什么是动画 开始先啰嗦一下,动画的解释(自我理解

随机推荐

  1. 我的php站点系统分析工具01

    出于后的工作需求.须要高速弄清楚整个php站点系统是怎样执行的.抱着试探的心态.写出了这个工具. 临时把它叫做"系统信息动态解析地图"吧,或许"系统信息图"更方 ...

  2. Android 进程常驻（5）----开机广播的简单守护以及总结

    这是一个轻量级的库,配置几行代码.就能够实如今android上实现进程常驻,也就是在系统强杀下,以及360获取root权限下.clean master获取root权限下都无法杀死进程 支持系统2.3到 ...

  3. 安卓系统底层C语言算法之測试參数是几个long型的算法

    #include <stdio.h> #define BITS_PER_LONG (sizeof(unsigned long) * 8) //求一个数x是几个long的长度 #define ...

  4. php之将用户信息写入数据库

    session高级应用将用户信息写入到数据库中 首先建立数据库表 在实验数据库sqldb中建立session表,用于存储数据 在根文件夹下建立须要用到的文件(重点是session,class.php这 ...

  5. 客户端通过wcf来启动或者停止服务器上的windows service

    1.设置服务器上的windows service的security,下面的命令只能用cmd.exe来运行(以管理员模式) sc sdset "LISA_43_Dev_Batch" ...

  6. Troubleshooting Failed Requests Using Tracing in IIS 8.5

    https://docs.microsoft.com/en-us/iis/troubleshoot/using-failed-request-tracing/troubleshooting-faile ...

  7. swift-初探webView与JS交互

    公司接下来的项目需要用swift内嵌h5来实现, 以前没有做过swift项目, 现在慢慢将所学的一点一滴记录一下 一个是怕自己忘了- =, 再就是希望大家看到能帮助我哈哈哈 前几天想要直接用swift ...

  8. ubuntu 使用阿里云 apt 源

    以下内容来自 https://opsx.alibaba.com/mirror Ubuntu对应的“帮助”信息 修改方式:打开 /et/apt/sources.list 将http://archive. ...

  9. 11. Container With Most Water[M]盛最多水的容器

    题目 Given \(n\) non-negative integers \(a_1,a_2,\cdots,a_n\), where each represents a point at coordi ...

  10. 关于1-n任意的gcd的和

    gcd和 题目 GCD sum 公约数的和 大意是让你求1-n任意两个数的gcd的和之类的. 解法 显然你需要枚举对吧,不然你怎么可能求出gcd呢? 其次我们需要一些数学推理 令F(n)表示\(\su ...