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. 《黑白团团队》第八次团队作业：Alpha冲刺 第四天

    项目 内容 作业课程地址 任课教师首页链接 作业要求 团队项目 填写团队名称 黑白团团队 填写具体目标 认真负责,完成项目 团队项目Github仓库地址链接. 第四天 日期:2019/6/18 成员 ...

  2. 【codeforces 724E】Goods transportation

    [题目链接]:http://codeforces.com/problemset/problem/724/E [题意] 有n个城市; 这个些城市每个城市有pi单位的物品; 然后已知每个城市能卖掉si单位 ...

  3. 【hdu 4135】Co-prime

    [题目链接]:http://acm.hdu.edu.cn/showproblem.php?pid=4135 [题意] 让你求出[a..b]这个区间内和N互质的数的个数; [题解] 利用前缀和,求出[1 ...

  4. 基于mybatis的CRUD

    u  基于Mybatis的CRUD u  掌握MyBatis的结果类型-resultMap和resultType u  掌握MyBatis的参数类型 u  掌握#和$两种语法 1      基于myb ...

  5. Android Cursor浅析

    1. 本文目的 Android ContentProvider提供了进程间数据交换的一种机制.而数据库的查询就是这样的机制的应用.那么app通过Uri查询数据库而得到的Cursor到底是个什么东西?为 ...

  6. linux c获取mac

    #include <stdio.h> #include <string.h> #include <net/if.h> #include <sys/ioctl. ...

  7. centos编译ffmpeg x264

    1.安装汇编编译器(一般系统自带吧).假设没有依照以下的命令安装吧 yum install yasm 2.使用最新x264源代码编译(仅仅支持编码)    在x264官网下载最新的代码http://w ...

  8. 【手势交互】6. 微动VID

    中国 天津 http://www.sharpnow.com/ 微动VID是天津锋时互动科技有限公司开发的中国Leap Motion. 它能够识别并跟踪用户手部的姿态.包含:指尖和掌心的三维空间位置:手 ...

  9. BZOJ：3441 乌鸦喝水

    bzoj:3441 乌鸦喝水 题目传送门 Description 一只乌鸦在自娱自乐,它在面前放了n个有魔力的水缸,水缸里装有无限的水. 他准备从第1个水缸飞到第n个水缸,共m次.在飞过一个水缸的过程 ...

  10. win32 Service memory leak

    https://stackoverflow.com/questions/2728578/how-to-get-phyiscal-path-of-windows-service-using-net ht ...