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>


  • 精彩推荐

  • 2020-01-13 11:26:40

    Ueditor报错not import language file vue

    解决办法，手动加载语言文件，提供了手动加载语言文件，避免ie下有时会因语言文件加载失败导致编辑器加载失败,提示"not import language file"的错误

  • 2020-01-13 11:30:56

    解决Uncaught SyntaxError: Unexpected token <

    今天写代码的时候发现了"Uncaught SyntaxError: Unexpected token <" <html>的js错误，而且还是html的第一行，我就蒙了，这第一行有啥问题啊，还有一个“<”符号，我以为是我的网页标签没有闭包，所以检查了一下，都不是啊！错误如图。

  • 2020-01-13 14:53:51

    sass中使用calc计算表达式变量问题

    calc（）是css的一个函数，可用于元素计算长度，比如div宽度想要减去一个固定宽度后并自适应，可以写为calc(100% - 60px) 注意“-”两边有空格 sass已经是常用的预编译语言，允许使用变量等规则，如果上边写到60px是一个变量，这个表达怎么写呢

  • 2020-01-13 21:01:04

    vue路由的异步加载(懒加载)方法

    vue本身不多介绍。直接说问题，因为vue的所有路由都是加载在一个app.js里的，如果项目巨大，那么首页加载会是灾难。所以我们就需要把某些路由用异步加载(懒加载)的方式进行加载.

  • 2020-01-13 21:56:45

    Ant Design Pro nginx配置

    Ant Design Pro nginx配置 今天看了下Ant和nginx的配置 给大家分享下 下边的配置可以直接使用 修改为自己的域名和文件夹目录就可以

  • 2020-01-13 23:36:35

    webpack之externals详解（精华）

    官网文档解释的很清楚，就是webpack可以不处理应用的某些依赖库，使用externals配置后，依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。

  • 2020-01-14 00:12:22

    webpack externals详解

    在众多的webpack配置教程中，对externals这个配置选项，总是一带而过，把文档中提到的几种方式都复述一遍，但是对于开发者而言，根本没法完全理解。本文试图通过一整篇文章，详细的对externals这个参数进行讲解。