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. c#远程链接服务器中MySQL

    转自原文 c#远程链接服务器中MySQL 1.要连接MySQL数据库必须首先下载mysql官方的连接.net的文件,文件下载地址为http://dev.mysql.com/downloads/conn ...

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

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

  3. HDU 4341

    分组背包而已.注意的是,每个时间T,要把一组的全加进去比较一次. #include <iostream> #include <cstdio> #include <cstr ...

  4. 微信小程序 多图上传解决方案

    为了使代码体积小  我这里将多图上传 封装到单独的一个js 页面的js调用他 我们看firhealth.js文件内容 // pages/home/home.js var upload = requir ...

  5. AnyForWeb告诉你什么才是“最好的”编程语言

    一被问到最好的编程语言是什么,专家们一定会异口同声的说,'世界上根本没有什么最好的,每一种编程语言都有它存在的意义和价值'. AnyForWeb认为,后半句所阐述的观点全然没错,但最好的也并不是不存在 ...

  6. 【C语言】编写函数实现字符串旋转

    //编写函数实现字符串旋转 #include <stdio.h> #include <assert.h> #include <string.h> void reve ...

  7. Codeforces Beta Round #29 (Div. 2, Codeforces format) C. Mail Stamps 拓扑排序

    C. Mail Stamps     One day Bob got a letter in an envelope. Bob knows that when Berland's post offic ...

  8. phpStorm中ftp的配置与使用,支持配置多个

    小结:很方便,支持ftp功能和比较. 扩展,可以查看远程文件和日期 配置多个ftp

  9. 最好的PHP框架有哪些

    最好的PHP框架有哪些 首推 Laravel ,其次是 Yii,Laravel 的设计思想以及在工程实践上的支持,超过 ThinkPHP 好几个世代.如果说原生的 PHP 是火枪, ThinkPHP ...

  10. Spring MVC【入门】

    Spring MVC[入门]就这一篇! MVC 设计概述 在早期 Java Web 的开发中,统一把显示层.控制层.数据层的操作全部交给 JSP 或者 JavaBean 来进行处理,我们称之为 Mod ...