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-08-15 17:44:21

    glob 介绍

    glob 最早是出现在类Unix系统的命令行中, 是用来匹配文件路径的。比如，lib/**/*.js 匹配 lib 目录下所有的 js 文件。 除了在命令行中，我们在程序中也会有匹配文件路径的需求。于是，很多编程语言有了对 glob 的实现 ，如 Python 中的 glob 模块； php 中的 glob 方法。

  • 2017-08-16 08:45:41

    nodejs中流(stream)的理解

    这种方式是把文件内容全部读入内存，然后再写入文件，对于小型的文本文件，这没有多大问题，比如grunt-file-copy就是这样实现的。但是对于体积较大的二进制文件，比如音频、视频文件，动辄几个GB大小，如果使用这种方法，很容易使内存“爆仓”。理想的方法应该是读一部分，写一部分，不管文件有多大，只要时间允许，总会处理完成，这里就需要用到流的概念。

  • 2017-08-17 17:58:48

    /usr、/home、/bin、/dev、/var、/etc中主要存放什么文件

    /usr 最庞大的目录，要用到的应用程序和文件几乎都在这个目录。其中包含： /usr/X11R6 存放X window的目录 /usr/bin 众多的应用程序 /usr/sbin 超级用户的一些管理程序 /usr/doc linux文档 /usr/include linux下开发和编译应用程序所需要的头文件 /usr/lib 常用的动态链接库和软件包的配置文件 /usr/man 帮助文档 /usr/src 源代码，linux内核的源代码就放在/usr/src/linux里 /usr/local/bin 本地增加的命令 /usr/local/lib 本地增加的库

  • 2017-08-17 19:26:00

    mysql安装目录、配置文件存放位置

    linux系统下，如何知道mysql使用的配置文件到底是哪个呢？linux自带的mysql的安装目录又是什么呢？数据存放在什么目录下？