<!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. python学习--导入自己的包

    定义一个自己的方法包: def myFunc(x): if x > 10: return x else: return -x 在需要的地方导入包: # 导入自定义的方法包 from learn ...

  2. Beat &#39;Em Up Game Starter Kit (横版格斗游戏) cocos2d-x游戏源代码

    浓缩精华.专注战斗! 游戏的本质是什么?界面?养成?NoNo!    游戏来源于对实战和比赛的模拟,所以它的本源就是对抗.就是战斗! 是挥洒热血的一种方式! 一个游戏最复杂最难做的是什么?UI?商城? ...

  3. spfile

    1 让ORACLE自己主动从spfile启动  SQL> create spfile='/dev/vx/rdsk/vgora/lv_spfile' from pfile;  SQL> sh ...

  4. LeakCanary：简单粗暴的内存泄漏检測工具

    差点儿每一个程序猿在开发的过程中都会遇到内存泄漏.那么我们怎样检測到app是否哪里出现内存泄漏呢?square公司推出了一款简单粗暴的检測内存泄漏的工具-- LeakCanary 什么是内存泄漏? 内 ...

  5. System Databases in SQL Server

    https://docs.microsoft.com/en-us/sql/relational-databases/databases/system-databases SQL Server incl ...

  6. django 笔记12 session

    第一步写好函数,然后生成数据库session表 python manage.py makemigrations python manage.py migrate session原理: .Session ...

  7. 【深入篇】自定义ExpandableListView，实现二级列表效果

    先看效果图: 上图是我们要实现的效果,那么现在我们开始着手去做,主要分为以下几步: 一丶我们需要根据效果图去思考该如何动手,从上图分析看,我们可以用一个相对布局RelativeLayout来完成gro ...

  8. <Sicily>Fibonacci 2

    一.题目描述 In the Fibonacci integer sequence, F0 = 0, F1 = 1, and Fn = Fn-1 + Fn-2 for n ≥ 2. For exampl ...

  9. php时间戳转化成时间相差8小时问题

    php时间戳 转化成时间的时候 $mytime=time(); echo $mytime.'<br />'; echo date('Y-m-d H:i:s',$mytime); 会产生8个 ...

  10. SSH概述与配置文件说明

    一.什么是SSH? 简单说,SSH是一种网络协议,用于计算机之间的加密登录.在出现SSH之前,系统管理员需要登入远程服务器执行系统管理任务时,都是用telnet来实现的,telnet协议采用明文密码传 ...