<!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. Nginx文件下载服务器

    1. 配置文件 server { listen 80; #端口 server_name localhost; #服务名 charset utf-8; #避免中文乱码 root /data/packag ...

  2. python网络编程知识体系

    python的网络编程包括: 1.mvc-socket-线程-进程-并发-IO异步-消费者生产者 2.mysql-paramiko-审计堡垒机-redis-分布式监控 线程.进程 和 协程 原理剖析 ...

  3. 省市县三级联动的SQL

    完整版见https://jadyer.github.io/ 首先是建表语句 CREATE TABLE `t_address_province` ( `id` INT AUTO_INCREMENT PR ...

  4. word安装mathtype

    1:window版本的mathtype:https://pan.baidu.com/s/1Yn8kPG9Y9nBPGaotFJaL2Q  ,密码spwm 2:点击exe安装   (安装到c盘,将不会出 ...

  5. vmware克隆虚拟机

    克隆步骤 右键需要克隆的虚拟机 > 管理,在克隆向导中选择完整克隆. 实验环境:win10_64bit + vmware 12 pro + CentOS6.9_64bit 克隆之后网络配置 克隆 ...

  6. PAT 1110 Complete Binary Tree[判断完全二叉树]

    1110 Complete Binary Tree(25 分) Given a tree, you are supposed to tell if it is a complete binary tr ...

  7. Windows Server 2008 R2(X64) MSDN镜像简体中文版与英文版ISO下载及Key激活码

    Windows Server 2008 R2 MSDN ISO镜像简体中文版 文件名:cn_windows_server_2008_r2_standard_enterprise_datacenter_ ...

  8. C#使用Gzip解压缩完整读取网页内容

    using System; using System.Threading; using System.Text; using System.Text.RegularExpressions; using ...

  9. visual studio多工程开发配置

    文章:带你玩转Visual Studio——带你多工程开发 带你玩转Visual Studio——带你理解微软的预编译头技术 通过上一篇文章带你玩转Visual Studio——带你多工程开发的讲解, ...

  10. 爬取51job职位信息之编码问题

    兴趣来潮,爬了下51job,但是遇到编码问题!以下是简单的一段代码 获取整个页面数据 # -*- coding:utf-8 -*- import requests import sysreload(s ...