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. easy-ui采坑事件

    新用户首次登陆修改密码 imput标签中使用easyui自带的class="easyui-passwordbox"可以是密码隐藏变成黑点但是无法禁用输入法,然后果断的加了一个typ ...

  2. 导入项目后下载jar包问题理解

    1.导入,然后你下载的jar包,jar下载成功,并不代表你项目里的代码就能用这个jar包了. 你必须还要本地添加进classpath.必须手动添加进类路径 2.总结就是:下载jar包是下载jar包,添 ...

  3. 剑指Offer读书笔记（持续更新中）

    (1)定义一个空的类型,里面没有不论什么成员变量和成员函数,对该类型求sizeof,得到的结果是多少? 答案是1.空类型的实例中不包括不论什么信息,本来求sizeof应该是0,可是当我们声明该类型实例 ...

  4. HDU 4268 Alice and Bob（贪心+Multiset的应用）

     题意: Alice和Bob有n个长方形,有长度和宽度,一个矩形能够覆盖还有一个矩形的条件的是,本身长度大于等于还有一个矩形,且宽度大于等于还有一个矩形.矩形不可旋转.问你Alice最多能覆盖Bo ...

  5. Tom和Jerry来了，Tom和Jerry走了——北漂18年（38）

    上次讲到跟我同一时候入职的女销售走了. 回忆起来,她的问题多半是技巧足够,脑子不足够,走了之后再没联系.不久之后,在老板的要求之下.LilyG又招聘了两位男销售,英文名字非常登对一个叫Tom,一个叫J ...

  6. 线程基础：JDK1.5+（8）——线程新特性（上）

    1.概要 假设您阅读JAVA的源码.出现最多的代码作者包含:Doug Lea.Mark Reinhold.Josh Bloch.Arthur van Hoff.Neal Gafter.Pavani D ...

  7. hdu 2151

    就是一个dp,数组内存的步数, 数组没清空,wa了一次 #include<cstdio> #include<algorithm> #include<cstring> ...

  8. win10 bcdedit加入vhdx启动

    第一步,先用hyper-v.imagex或者其他vhd安装器.将win10 系统安装到一个vhd文件里(vhdx更好.动态扩展等诸多优良特性).比方d:\win10tp.vhdx 第二步,运行例如以下 ...

  9. UVA - 11762 - Race to 1 记忆化概率

    Dilu have learned a new thing about integers, which is - any positive integer greater than 1 can bed ...

  10. java中字符串编码转换

    Java 正确的做字符串编码转换 字符串的内部表示? 字符串在java中统一用unicode表示( 即utf-16 LE) , 对于 String s = "你好哦!"; 如果源码 ...