<!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. xdotool xdotool模拟击键和鼠标移动--CutyCapt是一个截图工具,xvfb-run

    最近在做一个生成网站缩略图的功能,从网上查到相关资料,现与大家分享,xvfb这个软件,安装上之后一条命令就能执行此操作.很容易的就生成了自己想要的缩略图. xvfb-run -运行在一个虚拟的X服务器 ...

  2. Mirror--镜像相关错误

    场景: 同一局域网下搭建了镜像的服务器上报以下错误日志: An error occurred in a Service Broker/Database Mirroring transport conn ...

  3. 如何确定Hadoop中map和reduce的个数--map和reduce数量之间的关系是什么？

    一般情况下,在输入源是文件的时候,一个task的map数量由splitSize来决定的,那么splitSize是由以下几个来决定的 goalSize = totalSize / mapred.map. ...

  4. [py]python中__new__作用

    元类metaclass 使劲搞,但是没搞清楚__new__的作用 了解Python元类 Python进阶:一步步理解Python中的元类metaclass Python中的__new__和__init ...

  5. python 操作 mysql 数据库 datetime 属性字段为 0000-00-00 00:00:00 的问题

    撇开 sqlalchemy, 先讲 MySQLdb 和 pymysql mysql 版本 mysql  Ver 14.14 Distrib 5.1.73 新建一个测试表 test, 结构如下: mys ...

  6. 【android】移植IOS视图响应陀螺仪交互行为

    IOS有个很有趣味的特性:背景图片可以响应陀螺仪方向的变化,去改变X.Y轴上的值,从而让整个界面看着充满着灵性.具体步骤是:解锁苹果产品,在IOS7以上,摆动手势,观察桌面背景图片的变化. 刚好,我们 ...

  7. Es+kafka搭建日志存储查询系统（设计）

    现在使用的比较常用的日志分析系统有Splunk和Elk,Splunk功能齐全,处理能力强,但是是商用项目,而且收费高.Elk则是Splunk项目的一个开源实现,Elk是ElasticSearch(Es ...

  8. kafka环境安装

    源码包下载: http://archive.apache.org/dist/kafka/1.0.0/ 集群环境: master 192.168.1.99 slave1 192.168.1.100 sl ...

  9. 20155201 第十一周Java课堂实践

    一.表达式后缀表达式: a b x c d e / - f x + 二.mini dc MyDC.java import java.util.StringTokenizer; import java. ...

  10. Ecplise项目转移到Android Studio，以及Genymotion模拟器介绍

    一.移植android项目 今天简单分享一个从ecplise开发项目转移到Android Studio的方法,之前一直在ecplise上开发android项目,但是因为google现在主打Androi ...