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-02-01 22:09:18

    给linux添加回收站

    linux下常常使用rm，导致误操作删除一些重要的文档，很难恢复（当然也能恢复，不过比较复杂），所以在这种情况下，我们如果能给linux添加一个回收站就好多了，说白了，这个回收站机制也比较简单，就是使用 mv封装一个rm，简单的可以自己写个脚本，复杂点的就是在bin下添加这个封装命令就行了。

  • 2018-02-02 10:52:50

    IntelliJ IDEA 快捷键说明大全（中英对照、带图示详解）

    因为觉得网络上的 idea 快捷键不够详尽，所以特别编写了此篇文章，方便大家使用 idea O(∩_∩)O~ 其中的英文说明来自于 idea 的官网资料，中文说明主要来自于自己的领会和理解，英文说明只是作为参考。重要的快捷键会附带图示，进行详细的说明。

  • 2018-02-02 15:19:29

    贝塞尔曲线扫盲

    相信很多同学都知道“贝塞尔曲线”这个词，我们在很多地方都能经常看到。但是，可能并不是每位同学都清楚地知道，到底什么是“贝塞尔曲线”，又是什么特点让它有这么高的知名度。

  • 2018-02-04 23:46:16

    Android SQLite 升级数据库，在原有数据库的基础上添加一列

    原本以为很简单的问题，直接在原来创建数据库的语句中加上需要添加的列new_column，但是运行时发现，应用crash。原因是，原有数据库文件已经存在的情况下并不会重新创建数据库，也就是说此时数据库中并没有new_column列，这个时候，运行query()来查询数据库如果包括new_column列，就会导致应用crash。