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>


  • 精彩推荐

  • 2017-11-28 14:55:13

    使用 Vagrant 打造跨平台开发环境

    Vagrant 是一款用来构建虚拟开发环境的工具，非常适合 php/python/ruby/java 这类语言开发 web 应用，“代码在我机子上运行没有问题”这种说辞将成为历史。

  • 2017-11-28 14:57:19

    vagrant up 失败解决办法

    直接使用VirtualBox开启一个vm也会失败，基本上可以确定是VirtualBox版本的问题 有遇到过安装了VirtualBox-5.0.22-108108-Win.exe的版本在win7下用不了，卸载重装VirtualBox-4.3.12-93733-Win.exe之后可用。

  • 2017-12-05 22:30:02

    php7.0升级php7.2

    看电脑上的教程要备份7.0配置文件以及扩展啥的，我感觉不如卸载干净重新安装

  • 2017-12-06 09:35:10

    分页优化的四种方式

    在大数据量的情况下，原本很简单的分页如果没有处理好，你会发现分页的请求会消耗你大量的数据库时间。如果你遇到了这个问题，文章给了你几个很好的解决的方案。当然，初学者若能看完这篇文章，那么它会指导你写出更具有扩展性的分页代码。