<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>使用animate.css动画库控制vue.js过渡效果</title>

    <script src="vue.js"></script>

    <link rel="stylesheet" href="animate.css">

</head>

<body>

<div id="hdcms">

    <button @click="type=!type">显示/隐藏</button>

    <transition enter-active-class="animated fadeOutDown" leave-active-class="animated fadeInDown">

        <h1 v-if="type">http://www.baidu.com百度一下就知道</h1>

    </transition>

</div>

<script>

    new Vue({

        el: "#hdcms",

        data:{

            type:false

        }

    });

</script>

</body>

</html>

　　

048——VUE中使用animate.css动画库控制vue.js过渡效果的更多相关文章

  1. vue中使用animate.css动画库

    1.安装: npm install animate.css --save 2.引入及使用: //main.js中 import animated from 'animate.css' Vue.use( ...

  2. 基于animate.css动画库的全屏滚动小插件，适用于vue.js(移动端、pc)项目

    功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...

  3. css3动画和animate.css动画库使用

    CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...

  4. 在vue中使用animate.css

    animate.css是一款前端动画库,相似的有velocity-animate 用法: 首先 npm install animate.css --save 然后在vue文件的script中引入: i ...

  5. Animate.css动画库，简单的使用，以及源码剖析

    animate.css是什么?能做些什么? animate.css是一个css动画库,使用它可以很方便的快捷的实现,我们想要的动画效果,而省去了操作js的麻烦.同时呢,它也是一个开源的库,在GitHu ...

  6. vue中使用animate.css

    一:使用animate.css的使用 1.安装npm install animate.css --save 2.在main.js中引入import animate from 'animate.css' ...

  7. （生产）animate.css 动画库

    官网:https://daneden.github.io/animate.css/ Animate.css是一个有趣的,跨浏览器的css3动画库 用法 首先引入animate css文件:    &l ...

  8. vue中使用animate.css实现动画

    参考链接:https://www.cnblogs.com/ccyinghua/p/7872694.html 参考链接:https://www.jianshu.com/p/2e0b2f8d40cf 使用 ...

  9. 3个CSS动画库，比Animated还好用，让你的网站酷炫起来

    本文首发于https://www.1024nav.com/tools/css-animation-library 转载请注明出处 整理了日常前端开发中常用的css动画库,让你的网页动起来,可以在生成中 ...

随机推荐

  1. proxy ubuntu proxy--http://jingyan.baidu.com/article/8cdccae9913470315513cd70.html

    apt-get 设置代理 proxy 方法 方法一 :这是一种临时的手段,如果你仅仅是暂时需要通过http代理使用apt-get,你可以使用这种方法. 在使用 apt-get  之前,在终端中输入以下 ...

  2. vue - 计算属性、表单输入绑定

    计算属性 computed:{} <!DOCTYPE html> <html> <head> <title></title> </he ...

  3. CentOS 6.4下Squid代理服务器的安装与配置（转）

    add by zhj: 其实我们主要还是关注它在服务器端使用时,充当反向代理和静态数据缓存.至于普通代理和透明代理,其实相当于客户端做的事,和服务端没有什么关系.另外,Squid的缓存主要是缓存在硬盘 ...

  4. C# 反双曲余弦函数

    反双曲余弦函数的定义是: T1 = Math.Log(t + Math.Sqrt(t * t - 1)); 1. 叉乘(cross product),也叫向量的外积.向量积.顾名思义,求下来的结果是一 ...

  5. blockchain 区块链的开发，基于python或node js

    现在很多人用node js做区块链的开发,因为点对点并发是区块链中的难点技术之一,而node js天然的对并发支持比较好,因此比较有优势. http://ecomunsing.com/build-yo ...

  6. 国内比特币bitcoin交易平台

    火币网:   www.huobi.com 比特币中国:   www.btcchina.com okcoin:    www.okcoin.cn 中国比特币:   www.chbtc.com 比特币交易 ...

  7. 一些动态规划问题的java实现

    从上往下推公式,从下往上求解值. 一:矩阵链乘法,最小括号化方案,动态规划方程. 0        如果i=j m[i,j]  ={ min[i,k]+m[k+1,j]+pi-1pkpj        ...

  8. 2016ACM/ICPC亚洲区沈阳站 Solution

    A - Thickest Burger 水. #include <bits/stdc++.h> using namespace std; int t; int a, b; int main ...

  9. Errors occurred during the build. Errors running builder 'DeploymentBuilder' on project

    本文转自:http://www.phperz.com/article/14/1205/39544.html 本文向大家讲解了Myeclipse错误:Errors occurred during the ...

  10. iOS App迁移(App Transfer)注意点

    1.App迁移需要苹果审核吗? 答:不需要 2.App迁移需要多长时间? 答:迁移操作过程很快,A账号发出申请,B账号接收,几分钟时间.App Store 展示B账号相关信息可能几分钟,也可能有延迟几 ...