<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>智能社——http://www.zhinengshe.com</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>

        p{

            width:100px;

            height:100px;

            background: red;

            margin:10px auto;

        }

    </style>

    <script src="vue.js"></script>

    <link rel="stylesheet" href="animate.css">

    <script>

        window.onload=function(){

            new Vue({

                el:'#box',

                data:{

                    show:false

                }

            });

        };

    </script>

</head>

<body>

    <div id="box">

        <input type="button" value="点击显示隐藏" @click="show=!show">

        <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">

            <p v-show="show" class="animated" :key="1"></p>

            <p v-show="show" class="animated" :key="2"></p>

        </transition-group>

    </div>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>智能社——http://www.zhinengshe.com</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>

        p{

            width:100px;

            height:100px;

            background: red;

            margin:10px auto;

        }

    </style>

    <script src="vue.js"></script>

    <link rel="stylesheet" href="animate.css">

    <script>

        window.onload=function(){

            new Vue({

                el:'#box',

                data:{

                    show:'',

                    list:['apple','banana','orange','pear']

                },

                computed:{//$watch，数据变化监听

                    lists:function(){

                        var arr=[];

                        this.list.forEach(function(val){

                            if(val.indexOf(this.show)!=-1){

                                arr.push(val);

                            }

                        }.bind(this));

                        return arr;

                    }

                }

            });

        };

    </script>

</head>

<body>

    <div id="box">

        <input type="text" v-model="show">

        <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">

            <p v-show="show" class="animated" v-for="(val,index) in lists" :key="index">

                {{val}}

            </p>

        </transition-group>

    </div>

</body>

</html>
vue动画

vue路由

--------------------------------------

transition 之前  属性

<p transition="fade"></p>

.fade-transition{}

.fade-enter{}

.fade-leave{}

--------------------------------------

到2.0以后 transition 组件

<transition name="fade">

    运动东西(元素，属性、路由....)

</transition>

class定义:

.fade-enter{}    //初始状态

.fade-enter-active{}  //变化成什么样  ->  当元素出来(显示)

.fade-leave{}

.fade-leave-active{} //变成成什么样   -> 当元素离开(消失)

如何animate.css配合用？

    <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">

                <p v-show="show"></p>

            </transition>

多个元素运动:

    <transition-group enter-active-class="" leave-active-class="">

        <p :key=""></p>

        <p :key=""></p>

    </transition-group>

vue2.0-transition多个元素的更多相关文章

  1. vue2.0 transition 多个元素嵌套使用过渡

    在做vue的demo的时候遇到一个问题,多个嵌套的元素如何设置transition? 我的代码:代码中元素整体做平移,里面的inner中做旋转,实现一个圆形滚动的效果 <transition n ...

  2. vue2.0 transition -- demo实践填坑

    前言 vue1.0版本和2.0版本的过渡系统改变还是蛮彻底的,具体请自行详看文档介绍:https://vuefe.cn/v2/guide/migration.html#过渡.在使用2.0版本做过渡效果 ...

  3. 【重点突破】—— Vue2.0 transition 动画Demo实践填坑

    前言:vue1.0版本和2.0版本的过渡系统改变是很大的,具体请详看文档介绍.本文转载自郭锦荣的博客,一共列举了四种transition的使用实践,分别是css过渡.css动画.javascript钩 ...

  4. Vue2.0 Transition常见用法全解惑

    Vue2.0的过渡系统(transition)有了很大的改变,想把1.0的项目迁移到2.0,着实需要费一些功夫,今天我就要把vue2.0的过渡系统的用法搞清楚,因为之前确实踩了不少坑.这里只涉及单元素 ...

  5. vue2.0 transition 手风琴

    <div class="food"> <button @click="show=!show">show</button> & ...

  6. vue2.0中怎么获取元素

    在元素上添加 v-el:food-wrapper (不用驼峰的写法) vue1版本 报错: vue2版本 (vue2把vue1中的 v-el 改为了 ref vue1 v-el:foods-wrapp ...

  7. vue2.0 transition用法

    html: <div id="demo"> <button v-on:click="show = !show"> Toggle < ...

  8. vue1.0和vue2.0的区别(一)

    今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3> ...

  9. Vue2.0中的transition组件

    组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...

  10. vue2.0有哪些变化

    vue2.0之后有哪些变化: 1.每个组件模板template,不再支持片段代码 之前: <template> <h3>vue-router+vue-loader</h3 ...

随机推荐

  1. HDU-1083 Courses 二分图 最大匹配

    题目链接:https://cn.vjudge.net/problem/HDU-1083 题意 有一些学生,有一些课程 给出哪些学生可以学哪些课程,每个学生可以选多课,但只能做一个课程的代表 问所有课能 ...

  2. echars 在vue v-if 切换会 显示不出来或者显示出来但是不是百分百显示

    我也是百度看别人写的原因,然后自己总结,以后用到的时候来复制就可以将  v-if换成 v-show 第二不是百分百显示  可以用 this.$nextTick(function() { this.in ...

  3. 四则运算1 java+jsp+SQLServer

    1,设计思想(1)在java resourse里定义包和类 (2)在类里定义生成算式,并将算式保存在数据库中的方法 (3)在jsp文件中调用java方法 2,源程序代码 生成算式的方法 public ...

  4. ZOJ 2601 Warehouse Keeper

    Warehouse Keeper Time Limit: 2000ms Memory Limit: 65536KB This problem will be judged on ZJU. Origin ...

  5. 第九章 TCP和UDP同一时候用复用一个port实现一个回射server

    #include <sys/types.h> #include <sys/socket.h> #include <netinet/in.h> #include &l ...

  6. shuoj1936-D序列—最长上升子序列

    Description 已知两个长度为N的数组A和B.下标从0标号至N-1. 如今定义一种D序列 (如果长度为L).这样的序列满足下列条件: 1. 0 <= D[i] <= N-1 2.  ...

  7. nj03---阻塞和线程

    Node.js最大的特性就是"异步式I/O"与事件紧密结合的编程模式.这种模式与传统的同步式IO线性的编程思路有很大的不同,因为控制流很大程度上要靠"事件"和& ...

  8. 使用深度学习检测DGA（域名生成算法）——LSTM的输入数据本质上还是词袋模型

    from:http://www.freebuf.com/articles/network/139697.html DGA(域名生成算法)是一种利用随机字符来生成C&C域名,从而逃避域名黑名单检 ...

  9. BZOJ 3209 数位DP

    思路: 先预处理出来组合数 按位做 枚举sum[x]是多少 注意Mod不是一个质数 //By SiriusRen #include <cstdio> using namespace std ...

  10. 实时监控Cat之旅~对请求是否正常结束做监控（分布式的消息树）

    对基于请求的分布式消息树的分析 在MVC时有过滤器System.Web.Mvc.ActionFilterAttribute,它可以对action执行的整个过程进行拦截,执行前与执行后我们可以注入自己的 ...