<!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. JWT的初步了解以及session、cookie机制

    1.什么是状态保持? 想要了解JWT,首先需要知道什么是状态保持,举一个例子来说:无论是在web上还是在手机app上,我们都可以以游客的身份访问,此时都会有登录/注册字眼,当我们登录之后,就会是我们的 ...

  2. Map和WeakMap的区别

    个人总结:在一个变量作用域中,如果结束到作用域结尾 } 的话,map中的引用会被垃圾回收机制回收的是weakmap ,map中的引用不会被垃圾回收机制回收的是map. 强引用:只要引用存在,垃圾回收器 ...

  3. Base64编码字符串时数据量明显变大

    那就是当把byte[]通过Convert.ToBase64String转换成Base64编码字符串时数据量明显变大 Base64编码的思想是是采用64个基本的ASCII码字符对数据进行重新编码.它将需 ...

  4. PHP 变量作用域

    以下为 PHP 中的各种变量在底层实现中是如何存储的. 变量: $temp = 'temp'; $temp2 = $temp; // key p *executor_globals.symbol_ta ...

  5. UVA Foreign Exchange

    Foreign Exchange Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Your non ...

  6. UVALive 6084 Happy Camper（数学题）

    题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_ ...

  7. xcode5. 安装cocos2d－x 学习中。。。

    找了一些帖子  没搞出来,后来找到原因了   如今的cocos2d版本号在xcode.5上 没右模版了. 用命令行 来运行.看了官方的文档.最终攻克了--- 对于自己解决的问题都会感到点兴奋. .. ...

  8. Scala学习笔记及与Java不同之处总结-从Java开发者角度

    Scala与Java具有很多相似之处,但又有很多不同.这里主要从一个Java开发者的角度,总结在使用Scala的过程中所面临的一些思维转变. 这里仅仅是总结了部分两种语言在开发过程中的不同,以后会陆续 ...

  9. sublime text3 3143注册码

    注册码: -– BEGIN LICENSE -– TwitterInc 200 User License EA7E-890007 1D77F72E 390CDD93 4DCBA022 FAF60790 ...

  10. 11.IntelliJ IDEA详细配置和使用教程(适用于Java开发人员)

    转自:https://blog.csdn.net/chssheng2007/article/details/79638076 前言 正所谓工欲善其事必先利其器,对开发人员而言若想提高编码效率,一款高效 ...