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-03-16 15:57:53

    nuxtjs中单独引入Message组件的问题

    // 引入elementUIimport { Message } from 'element-ui';//由于Message组件并没有install 方法供Vue来操作的，是直接返回的，因此按照官方文档单独引入的方法是//会报错的，需要给 Message 添加 install 方法Message.install = function (Vue, options) {Vue.prototype.$message = Message}Vue.use(Message )//消息提示

  • 2020-03-16 16:03:20

    css的var()函数

    　随着sass，less预编译的流行，css也随即推出了变量定义var函数。var()函数，就如同sass和less等预编译软件一样，可以定义变量并且进行对应的使用。

  • 2020-03-16 16:52:05

    对icomoon的误解，以及最快速的使用

    此时需要注意顶部第一个选项，Quick Usage，一定要打开，Enable Quick Usage，谁让咱英语不好呢，这个时候会出现一个css连接，直接引用就好了，就可以随意使用图标了，引入这一个css就能实现我们的功能，省区引入太多文件的烦恼，你可以在浏览器打开这个css，可以看到里面把我们所用的文件整成base64了。所以挺好用的。

  • 2020-03-17 09:47:05

    video标签视频不自动播放的问题

    添加 muted 属性，就可以通过地址栏进入网页的时候自动播放了，手机端还是有的有限制的，比如iphone浏览器，就不行，苹果手机为了保护用户的流量和用户的意愿，是禁止自动播放的，必须有手动触发。

  • 2020-03-17 14:21:31

    nuxt+pm2 自动化部署及打包后文件自动上传阿里云 oss（精华）

    部署nuxtjs，这一篇文章就够了，pm2 代码自动发布依赖于 git 工具，先将 ssh 密钥配置再你的代码仓库（github 或者 gitLab），具体操作自行 google 或者点击github 配置 ssh。 使用 ssh 密钥链接服务器 s $ ssh-copy-id root@1.2.3.4 # 把本机的 SSH 秘钥添加至服务器，配置成功后，以后就不需要再执行这条 SSH 命令了

  • 2020-03-18 21:15:34

    使用canvas画布解决百度地图自定义图层全球连续显示问题

        基于百度地图的Web API进行自定义图层叠加时，默认的图层只能叠加到全球范围以内，即经度范围为[-180, 180]，而无法将图层叠加到默认的全球范围以外，即经度范围超出了[-180, 180]之后，经纬度坐标会自动回归到(0, 0)，而导致在地图拖拽时全球以外无法连续显示想要的图层，此时可以基于百度地图的自定义图层将经纬度坐标转为像素点使用画布canvas来解决该问题。解决后效果如下图所示： ———————————————— 版权声明：本文为CSDN博主「宏伟杰作」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/u011284073/article/details/80549950

  • 2020-03-18 21:18:01

    node-canvas实现百度地图个性化底图绘制

    随着nodejs的推出，node的并发和异步的强大能力，越来越多的得到应用，而且取得了非常不错的效果。 作为一个前端工程师对node.js自然有着一份更深的感情，跃跃欲试的心情，总希望能将它应用到产品中来。