<!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. indexedDB介绍

    什么是 indexedDB IndexedDB 是一种使用浏览器存储大量数据的方法.它创造的数据可以被查询,并且可以离线使用. IndexedDB对于那些需要存储大量数据,或者是需要离线使用的程序是非 ...

  2. [SHOI2012]魔法树

    题目:洛谷P3833. 题目大意:给你一棵树,有两种操作:1.给两个点和它们之间的最短路上的所有点加上一个值:2.询问以某个点为根的子树的子树和.你需要实现这个功能. 解题思路:如果只有最后才询问的话 ...

  3. mysql 1067终极解决办法 亲测好使

       进入mysql data 目录 删除 ib_logfile0  ib_logfile1   ibdata1   这三个文件 重启mysql

  4. caioj 1153 扩展欧几里德算法（解不定方程）

    模板题 注意exgcd函数要稍微记一下 #include<cstdio> #include<cctype> #include<algorithm> #define ...

  5. 紫书 习题8-4 UVa 11491 （贪心）

    题意:给你一个数, 要求删去一些数字, 使得剩下的数字最大. 这道题用贪心解决. 大家想一想, 两个数比较大小, 肯定先比较第一位的数,然后依次比较第二位,以此类推. 既然我们要保证最后的数字最大, ...

  6. PID的原理

    来源:https://www.cnblogs.com/foxclever/p/8902029.html 在自动控制中,PID及其衍生出来的算法是应用最广的算法之一.各个做自动控制的厂家基本都有会实现这 ...

  7. 【BZOJ 1269】 [AHOI2006]文本编辑器editor

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] /* [move k] 指令.直接 把pos改成k.表示改变光标位置 [insert n s],在pos后面插入一个长度为n的字符串 ...

  8. javascript位操作符右移>>>的妙用

    var len=arr.length>>>0; 在arr.length为null或undefined的时间,强制转换为0;

  9. reactor模式与java nio

     Reactor是由Schmidt, Douglas C提出的一种模式,在高并发server实现中广泛採用. 改模式採用事件驱动方式,当事件出现时,后调用对应的事件处理代码(Event Handl ...

  10. BeautifulSoup的高级应用 之.parent .parents .next_sibling.previous_sibling.next_siblings.previous_siblings

    继上一篇BeautifulSoup的高级应用,主要解说的是contents children descendants string strings stripped_strings.本篇主要解说.pa ...