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-02-23 23:27:26

    Nuxt.js 基础入门教程

    Nuxt.js 就是一个极简的 vue 版的 ssr 框架。基于它，我们可以快速开发一个基于 vue 的 ssr 单页面应用。

  • 2020-02-24 18:36:17

    百度地图做电子围栏总结

    需求：在地图上画出围栏，设置围栏信息后保存，生成围栏列表。全选时，地图视野可看到全部的围栏区域，单独勾选会调整地图视野到当前勾选的围栏。围栏区域的中心点要显示围栏名称。

  • 2020-02-24 18:37:17

    百度地图绘制轨迹点

    没有后台获取事实信息 都是伪数据- -轨迹信息做不到事实导航。 控件可以根据自己的需求添加 位置通过offset：new BMAP.Size(x,y)进行微调 事实路况信息需要通过引没有后台获取事实信息 都是伪数据- -轨迹信息做不到事实导航。 控件可以根据自己的需求添加 位置通过offset：new BMAP.Size(x,y)进行微调 3D视图部分城市没有开放开放 根据需求自己添加

  • 2020-02-24 18:43:54

    百度地图JS关于规划路线偏离预警的解决方式

    说实在的这个解决方案有点low，我并不会很赞成，效率有点低。如果多的话，很是耗费资源。 我推荐使用矩形来解决这个问题，而不是圆形。 当日用矩形的话，就要确保轨迹是折线的，而不是弧线等。

  • 2020-02-24 18:45:33

    巧妙解决百度地图加偏纠偏问题

    所谓的加偏，就是将真实坐标加上一定的偏移量，而这个偏移量又不是线性的，不同地区偏移不一样，但同一地区偏移量却差不多，因此，有人就使用了个暴力破解的方法，

  • 2020-02-24 18:48:34

    规划驾车路线和途径点及判断车辆路线偏移

    项目需求需要利用百度地图构建路线并支持设置途径点，以及可以实时监控车辆是否偏移路线；两种方案。 写了比较完整的注释了，替换ak可直接看效果，规划驾车路线和途径点及判断车辆路线偏移