<!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. Django - rest - framework - 下

    一.视图三部曲 https://www.cnblogs.com/wupeiqi/articles/7805382.html 使用混合(mixins) 之前得视图部分 # urls.py from dj ...

  2. 【mlflow】打包：npm run build + python setup.py sdist

    mlflow是一个开源机器学习平台 最近需要使用一个它的最新版本,但是这个最新版本没有git包,无法通过pip install安装,需要打包安装. 打包完之后在项目的dist文件夹中有打包后的压缩包, ...

  3. JavaScript高级程序设计第三版学习笔记(一)之数据类型区分详谈

    null.NaN.undefined三者的区别是什么? 在初次接触到JavaScript的时候,傻傻的分不清null.NaN.undefined三者到底区别何在,在实际的项目开发中也因为这个问题而困惑 ...

  4. 【python】BeautifulSoup的应用

    from bs4 import BeautifulSoup#下面的一段HTML代码将作为例子被多次用到.这是 爱丽丝梦游仙境的 的一段内容(以后内容中简称为 爱丽丝 的文档): html_doc = ...

  5. CEO 是一家创业公司的天花板

    大家说是不是呢?一秒钟内看到本质的人,和半辈子也看不清一件事本质的人,自然是不一样的命运.

  6. linux 安装 mysql-5.6.26

    linux安装mysql-5.6.26 查看工具:winscp 下载地址 http://mirrors.sohu.com/mysql/MySQL-5.6/ 文件: mysql-5.6.26-linux ...

  7. [Axiom 3D]2.Axiom 基本概念

    1.Root Root 对象是一个 Ogre 应用程序的主入口点.因为它是整个 Ogre 引擎的外观(Façade )类(请参考设计模式中的外观模式),所以在这里作为第一个被列出来的类,它提供了方便的 ...

  8. Openstack(七）keystone

    官方安装文档:https://docs.openstack.org/ocata/zh_CN/install-guide-rdo/index.html 7.1 keystone简介 Keystone 中 ...

  9. wordpress的安装及使用

    1.如何查看别人的wordpress站点所有的模板 2.如何使用自定义的模板

  10. java 的==和equals的区别（二）

    java 的==和equals的区别 java 的==和equals的区别 ==通常表明引用的是同一个东西(引用的地址相同),equals通常表明两个对象的内容相同(值相同) ------------ ...