vue过渡和animate.css结合使用

2017-11-29 17:57:22 
<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>动画</title>
    <script type="text/javascript" src="vue.js"></script>
    <link rel="stylesheet" type="text/css" href="animate.css">
    <style type="text/css">
        p {
            width: 300px;
            height: 300px;
            background: red;
            margin: 10px auto;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){            var app = new Vue({
                el:'#box',
                data:{
                    show:false
                }
            })
        }    </script></head><body>
    <div id="box">
        <!-- 控制数据的值切换显示隐藏 -->
        <button @click="show=!show">transition</button>
        
        <!-- <transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
            <p v-show="show" class="animated"></p>
        </transition> -->

        <!-- 第二种方法 -->
        <!-- <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
            <p v-show="show"></p>
        </transition> -->

        <!-- 多元素运动 -->
        <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>


  • 精彩推荐

  • 2018-11-06 06:42:59

    XUtils3框架数据库的基本使用方法

    今天给大家带来数据库模块的讲解，现在主流的ORM框架很多，比如OrmLite,GreenDao,Active Android,Realm等等，这些框架每个都有自己的优点和缺点，大家完全可以根据自己项目的实际需求进行选择，下面开始进入今天的数据库模块的介绍。

  • 2018-11-17 21:05:48

    Android ANR发生的原因总结和解决办法

    ANR的全称是application not responding，是指应用程序未响应，Android系统对于一些事件需要在一定的时间范围内完成，如果超过预定时间能未能得到有效响应或者响应时间过长，都会造成ANR。一般地，这时往往会弹出一个提示框，告知用户当前xxx未响应，用户可选择继续等待或者Force Close。

  • 2018-11-17 21:08:09

    Android 单个应用的内存限制

    获取Android手机应用内存大小 手机不同其性能也不同，手机本身内存可能有大有小，所以针对每个应用的内存大小也不相同。

  • 2018-11-17 21:11:14

    Android中App可分配内存的大小

    　结果：（1）未设定属性android:largeheap = "true"时，可以申请到的最大内存空间为221M。 　　　　　（2）设定属性android:largeheap = "true"时， 可以申请的最大内存空间为478M，是原来的两倍多一些。

  • 2018-11-17 22:44:53

    LeakCanary，30分钟从入门到精通

    在性能优化中，内存是一个不得不聊的话题；然而内存泄漏，显示已经成为内存优化的一个重量级的方向。当前流行的内存泄漏分析工具中，不得不提的就是LeakCanary框架；这是一个集成方便， 使用便捷，配置超级简单的框架，实现的功能却是极为强大的。