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. 2015 Multi-University Training Contest 8 hdu 5381 The sum of gcd

    The sum of gcd Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)To ...

  2. C/C++ 图像二进制存储与读取

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50782792 在深度学习时,制作样本数 ...

  3. iwebshop 增删改查

    <?php header("content-type:text/html;charset=utf-8"); class Test extends IController { ...

  4. 在centOS6.5 上安装使用pipework

    需求:镜像生成了2个含有tomcat的容器,用nginx进行负载均衡.但是容器重启后ip会自动改变...所以使用pipework进行分配静态ip pipework安装 OS:centos6.5 第一步 ...

  5. SVN打tag

          SVN打tag是一个非经常常使用的功能,要谈打tag,还得从SVN官方推荐的文件夹结构说起.SVN官方推荐在一个版本号库的根文件夹下先建立trunk.branches.tags这三个文件夹 ...

  6. Pixhawk---基于NSH的Firmware开发与调试

    1 相关知识了解 1.1 Nuttx系统   嵌入式实时操作系统(RTOS). 强调标准兼容和小型封装,具有从8位到32位微控制器环境的高度可扩展性.NuttX 主要遵循 Posix 和 ANSI 标 ...

  7. 多线程编程TSL相关的技术文档

    线程本地存储 (TLS) https://msdn.microsoft.com/zh-cn/library/6yh4a9k1(v=vs.80).aspx Using Thread Local Stor ...

  8. Linux 下安装apache2.4

    Linux 下安装apache2.4 下载,解压,配置安装! 好生麻烦! 安装一个apache,需要很多依赖!比如apr.apr-util.pcre等等. 这些依赖有可能还需要别的更多的依赖! 真心的 ...

  9. Java-MyBatis：MyBatis3 | 日志

    ylbtech-Java-MyBatis:MyBatis3 | 日志 1.返回顶部 1. 日志 Mybatis 的内置日志工厂提供日志功能,内置日志工厂将日志交给以下其中一种工具作代理: SLF4J ...

  10. iris中间件

    最近使用golang写的时候涉及到权限校验,用中间件(使用iris框架内的东西) 自己摸索出一种自己的方式 iris.UseFunc(MiddlewareFunc)使用这个方法,会在所有的请求之前执行 ...