<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

  <!-- 这里引入第三方的动画js -->

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

  <!-- 入场fadelUp    离场 zoomOut -->

</head>

<body>

  <div id="app">

    <input type="button" value="点击" @click="flag=!flag">

    <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->

    <!-- 第一种方式： -->

    <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">

      <h3 v-if="flag">这是一个H3</h3>

    </transition>

    <!-- 第二种方式： -->

    <!-- 这里使用 :duration="毫秒值" 来统一设置 入场 和 离场 时候的动画时长 -->

    <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200">

      <!-- 这里要使用animated库 先在元素上添加这个库 然后在选择哪个特效 -->

      <h3 v-if="flag" class="animated">这是一个H3</h3>

    </transition>

    <!-- 使用  :duration="{ enter: 200, leave: 400 }"  来分别设置 入场的时长 和 离场的时长  -->

    <transition enter-active-class="bounceIn" leave-active-class="zoomOut" :duration="{ enter: 2000, leave: 400 }">

      <h3 v-if="flag" class="animated">这是一个H3</h3>

    </transition>

  </div>

  <script>

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        flag: false

      },

      methods: {}

    });

  </script>

</body>

</html>

Vue 用第三方的库去实现动画效果的更多相关文章

  1. vue中使用第三方插件animate.css实现动画效果

    vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...

  2. /*去hover动画效果*/

    <!DOCTYPE html> /*去hover动画效果*/ <html lang="en"> <head> <meta charset= ...

  3. 在Vue将第三方JS库封装为组件使用

    第三方JS库地址:https://github.com/inorganik/CountUp.js 使用NPM进行安装: npm install --save countup 根据官方回答,CountU ...

  4. Vue引入第三方JavaScript库和如何创建自己的Vue插件

    一 第三方JavaScript库 前言 .vue文件 中不解析 script标签引入js文件,只能用 import 引入 有两种用法: 1.import a from '../a' 2.import ...

  5. Lottie开源库实现Android动画效果

    Lottie简介 Lottie是一个支持Android.iOS.React Native,并由Adobe After Effects制作aep格式的动画,然后经由bodymovin插件转化渲染为jso ...

  6. 转《vue引入第三方js库》

    一.绝对路径直接引入,全局可用 二.绝对路径直接引入,配置后,import 引入后再使用 三.webpack中配置 alias,import 引入后再使用 四.webpack 中配置 plugins, ...

  7. vue中使用transition和animate.css动画效果

    一.单个动画中,使用div中引用animate动画 1.下载依赖 npm install animate.css –save 2.main.js中全局引用 import animate from 'a ...

  8. 在vue中使用animate库

    <style> @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5) } 100% ...

  9. 每日CSS_滚动页面动画效果

    每日CSS_滚动页面动画效果 2021_1_13 源码链接 1. 代码解析 1.1 html 代码片段 <section> <h2>开 始 滑 动</h2> < ...

随机推荐

  1. 【JZOJ3635】【BOI2012】Peaks

    ╰(￣▽￣)╭ 有一个居住在多山岛屿的登山家,已经攀上了一座山峰,并且要攀爬另外一座更高的山峰. 更精确地说,岛上的每一点都有一个大于零的海拔(海面的海拔为零),并且如果登山家位于海拔Ei的山峰上,那 ...

  2. 【机器学习PAI实战】—— 玩转人工智能之利用GAN自动生成二次元头像

    前言 深度学习作为人工智能的重要手段,迎来了爆发,在NLP.CV.物联网.无人机等多个领域都发挥了非常重要的作用.最近几年,各种深度学习算法层出不穷, Generative Adverarial Ne ...

  3. 【软件安装】Linux下安装OpenSSL

    安装环境: 操作系统:Ubuntu14.04 OpenSLL Version:openssl-1.0.2n.tar.gz(1.0.2版本为稳定版本,1.1.0为开发版本) OpenSLL下载地址为:h ...

  4. cp和mv命令

    注意事项:mv与cp的结果不同,mv好像文件“搬家”,文件个数并未增加.而cp对文件进行复制,文件个数增加了. 一.cp命令 cp命令用来将一个或多个源文件或者目录复制到指定的目的文件或目录.它可以将 ...

  5. js不停地触发按钮的事件

    例子:不断地发匿名邮件 http://tool.chacuo.net/mailsend 在控制台写:setInterval('$(".convert :input[arg]").t ...

  6. 开启远程XUL

    参考:https://developer.mozilla.org/zh-cn/Remote_XUL firefox自4.0起(2011年4月版本,目前最新版为13.0),开始禁用远程XUL,这阻碍了初 ...

  7. python中defaultdict类

    回宿舍前翻翻Codeforces的时候发现了一个有趣的代码．．其实是我没这么用过 :D 这是一份417B的代码 import sys from collections import defaultdi ...

  8. hdu 2844 混合背包【背包dp】

    http://acm.hdu.edu.cn/showproblem.php?pid=2844 题意:有n种纸币面额(a1,a2,...an),每种面额对应有(c1,c2,...cn)张.问这些钱能拼成 ...

  9. springboot 数据访问【转】【补】

    六.SpringBoot与数据访问 1.JDBC pom.xml配置 <dependencies> <dependency> <groupId>org.spring ...

  10. 在Debug模式下，如何给.lib和.dll添加一个d标记（*d.lib,*d.dll)

    选中工程->右键->属性->配置属性->常规,可以看到项目默认值的配置类型有好几种类型,选择静态库类型生成lib文件,选择动态库类型生成dll文件,选择应用程序生成exe文件, ...