<!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. vue生命周期-学习心得

    每个Vue实例在被创建之前都要经过一系列的初始化过程,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,这个过程就是vue的生命周期. 1 vue生命周期图 {: ...

  3. HDU-5009 Paint Pearls 动态规划 双向链表

    题目链接:https://cn.vjudge.net/problem/HDU-5009 题意 给一串序列,可以任意分割多次序列,每次分割的代价是被分割区间中的数字种数. 求分割区间的最小代价.n< ...

  4. [Vijos P1369]难解的问题

    题目大意:给你一个序列,叫你求最长上升子序列长度,但必须包含第k项. 解题思路:我们把k左边的比a[k]大的数去掉,k右边的比k小的数去掉,就可以保证选到a[k]了(因为左边的数小于a[k],而a[k ...

  5. [codevs3269]混合背包

    题目大意:一道混合背包模板. 解题思路:分三种情况讨论,01和完全没什么问题,多重背包需要把物品分成$\log W[i]$件,然后01即可,分成W[i]件01会TLE. 读优大法好! C++ Code ...

  6. redis做成windows服务

    打开cmd切换到redis根目录 执行安装命令  redis-server.exe --service-install redis.windows.conf --loglevel verbose 卸载 ...

  7. 【Henu ACM Round#24 B】Gargari and Bishops

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 如果写过n皇后问题. 肯定都知道 某个点(i,j)和它在同一条对角线上的点分别是i+j的值和i-j的值相同的点. 然后会发现选择的两 ...

  8. OpenStack-API开发

    介绍两种OpenStack-API(Java版)--jcoulds && openstack4j Jclouds 1.介绍 jclouds -该API提供云计算环境的可移植抽象层以及云 ...

  9. bzoj1050【HAOI2006】旅行comf

    1050: [HAOI2006]旅行comf Time Limit: 10 Sec  Memory Limit: 162 MB Submit: 2205  Solved: 1174 [Submit][ ...

  10. Laravel-数据库队列

    Laravel-数据库队列 标签(空格分隔): php 介绍 Laravel队列为不同的后台队列服务提供统一的API,例如Beanstalk,Amazon SQS, Redis,甚至其他基于关系型数据 ...