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-10-28 11:16:09

    Android vector标签 PathData 画图超详解

    SVG是一种矢量图格式，是Scalable Vector Graphics三个单词的首字母缩写。在xml文件中的标签是<vector>，画出的图形可以像一般的图片资源使用，例子如下

  • 2018-10-30 00:16:41

    android ToolBar 设置颜色

    app:popupTheme——有时候我们有需求：ActionBar文字是白的，ActionBar Overflow弹出的是白底黑字让ActionBar文字是白的，那么对应的theme肯定是Dark。可是让ActionBar弹出的是白底黑字，那么需要Light主题。这时候popupTheme就派上用场了。android:theme 与app:theme——在AppCompat v21里，提供了一个快速方便的方法设置Toolbar的主题，使用app:theme。而新版本22.1.x中，AppCompat 允许对 Toolbar 使用 android:theme代替 app:theme。最好的一点是：它会自动继承父视图的theme ，并且兼容所有APIv11以上的设备。

  • 2018-11-01 22:08:19

    Android Toolbar左、中、右对齐

    默认的Android Toolbar中添加子元素view是从左到右依次添加。需要注意的是，Android Toolbar为自身的NavigationIcon（app:navigationIcon）最靠右，Logo（app:logo）紧接NavigationIcon、Title（app:title）接续Logo、保留了默认的位置（从左边到右）。这些Android Toolbar保留的系统设置字段将挤压开发者自己安放在Toolbar中的子view，如图所示：

  • 2018-11-06 06:42:59

    XUtils3框架数据库的基本使用方法

    今天给大家带来数据库模块的讲解，现在主流的ORM框架很多，比如OrmLite,GreenDao,Active Android,Realm等等，这些框架每个都有自己的优点和缺点，大家完全可以根据自己项目的实际需求进行选择，下面开始进入今天的数据库模块的介绍。