操作元素时有个过渡或动画的效果(渐变和移动的效果和放大缩小的效果)

过渡:trasition

动画:animation

1.vue动画的理解

1)操作css的trasition或animation(它本身不是传动画)

2)vue会给目标添加/移除特定的class

3)过渡相关的类名

　　xxx-enter-active:制定显示的transition

　　xxx-leave-acttive:指定隐藏的transition

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

1.test014(1).html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*显示/隐藏时的过渡效果*/
        .xxx-enter-active,.xxx-leave-active{
            transition: opacity 1s;
        }
        /*隐藏时的样式*/
        .xxx-enter,.xxx-leave-to{
            opacity: 0;
        }

        /*显示时的过渡效果*/
        /*改变多个时写all,然后再指定*/
        .move-enter-active{
            transition: all 1s;
        }
        /*隐藏时的过渡效果*/
        .move-leave-active{
            transition: all 3s;
        }
        /*隐藏时的样式*/
        .move-enter,.move-leave-to{
            opacity: 0;
            /*在水平方向移动,向右边移动,所以是正值20px*/
            transform: translateX(20px);
        }
    </style>
</head>
<body>
<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 type="text/javascript">
    new Vue({
        el:'#test1',
        data(){
            return{
                isShow:true
            }
        }
    })

    new Vue({
        el:'#test2',
        data(){
            return{
                isShow:true
            }
        }
    })
</script>
</body>
</html>
2.test014(2).html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*进入过程动画*/
        .bounce-enter-active{
            animation: bounce-in .5s;
        }
        /*离开过程动画*/
        .bouce-leave-active{
            /*reverse反过来*/
            animation: bounce-in .5s reverse;
        }
        /*具体使用哪个animation*/
        @keyframes bounce-in {
            /*x%为时间;scale(1.5),1.5为放大1.5倍;*/
            0%{
                transform:scale(0);
            }
            50%{
                transform:scale(1.5);
            }
            100%{
                transform:scale(1);
            }
        }
    </style>
</head>
<body>
<div id="example-2">
    <button @click="show=!show">Toggle show</button>
    <br>
    <transition name="bounce">
        <!--display: inline-block不加这个会占一整行,加了就会缩小至当前文字-->
        <p v-if="show" style="background: red;display: inline-block">吾乃常山赵子龙也!!!</p>
    </transition>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#example-2',
        data:{
            show:true
        }
    })
</script>
</body>
</html>

3.总结:

基本过渡动画的编码步骤:

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

2)定义class样式

指定过渡样式transition

指定隐藏时样式:opacity/其他

(尚014)Vue过渡与动画的更多相关文章

  1. Vue过渡和动画效果展示（案例、GIF动图演示、附源码）

    前言 本篇随笔主要写了Vue过渡和动画基础.多个元素过渡和多个组件过渡,以及列表过渡的动画效果展示.详细案例分析.GIF动图演示.附源码地址获取. 作为自己对Vue过渡和动画效果知识的总结与笔记. 因 ...

  2. Vue过渡与动画

    通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果.Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数在过渡 ...

  3. 9、VUE过渡和动画

    1.过渡效果 Vue提供了transition的封装组件,在下列情形中,可以给任何元素和组件添加entering/leaving过渡. 我们注意到,<transition>标签的标记是 n ...

  4. 四、Vue过渡与动画、过渡css类名、自定义指定、过滤器

    一.过渡 动画 1.1简单的过渡动画使用 parent.vue [0]定义一个待显示的数据 [1]定义一个显示隐藏flag [2]使用动画过滤标签,name用来连接style样式:v-show用来控制 ...

  5. vue过渡动画

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

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

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

  7. Vue——关于css过渡和动画那些事

    1. 单元素/组件的过渡transition Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v ...

  8. vue过渡动画效果

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

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

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

随机推荐

  1. 『Go基础』第6节 注释

    在上一节中, 我们学会了怎样写一个 Hello Go . 但是, 大家有可能还没有明白为什么那么写, 下面我们通过注释来了解一下. 注释的重要性不再过多赘述, 一段不写注释的代码读起来实在难受. 那么 ...

  2. MediaPlayer的prepareAsync不回调onPrepared问题

    一.问题排查 debug调试的framework日志信息: 根据日志,进入MediaPlayer的framework层看源码 STEP 1 先从 V/MediaPlayerNative: constr ...

  3. [SOJ #537]不包含 [CF102129I]Incomparable Pairs(2019-8-6考试)

    题目大意:给定一个长度为$n$的字符串$s$,求有多少个无序字符串二元组$(x,y)$满足:$x,y$是$s$的字串,且$x$不是$y$的字串,$y$不是$x$的字串 题解:发现满足$x,y$是$s$ ...

  4. 解析：让你弄懂redux原理

    作者: HerryLo 本文永久有效链接: https://github.com/AttemptWeb...... Redux是JavaScript状态容器,提供可预测化的状态管理. 在实际开发中,常 ...

  5. Web应用和Web框架

    一.Web应用 二.Web框架 三.wsgiref模块 一.Web应用 1.什么是Web应用? Web应用程序是一种可以通过Web访问的应用程序,特点是用户很容易访问,只需要有浏览器即可,不需要安装其 ...

  6. 某类继承thread，同时实现runnable

    package com.giserve.test; public class ThreadTest { public static void main(String[] args) { new Thr ...

  7. cocoaPods升级遇到的问题 升级ruby 升级cocoaPos

    最近重复了一次,修复一些更改. 1.查询 rvm版本rvm -v 2.查询ruby版本ruby -v 3.查询 gem 版本gem -v 4.查询ruby 镜像gem sources -l 5.升级r ...

  8. thinkPHP中session()方法用法详解

    本文实例讲述了thinkPHP中session()方法用法.分享给大家供大家参考,具体如下: 系统提供了Session管理和操作的完善支持,全部操作可以通过一个内置的session函数完成. 用法 ? ...

  9. mybatis中如何将多个表的查询结果，放入结果集中返回

    1.首先需要将resultMap进行改造,为了避免对其他sql的影响建议另外定义一个resultMapExtral,避免id相同, 2.然后在resultMapExtral中添加其它表的字段,若多个表 ...

  10. python接口测试之新手篇

    嗨,大家好,我是小白,好久没写博客了,最近公司搞什么python的接口测试,心里一阵狂喜,在公司上百个接口里拿出一个主要接口一顿乱搞,好在搞通了 但是在这过程中也碰到了好多的问题,决定将问题分享出来能 ...