<!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. Freckles (最小生成树)

    #include<iostream> #include<cstring> #include<stdio.h> #include<queue> #incl ...

  2. Codeforces Round #395 (Div. 2) A. Taymyr is calling you【数论/最小公倍数】

    A. Taymyr is calling you time limit per test 1 second memory limit per test 256 megabytes input stan ...

  3. Python 使用BeautifulSoup模块抽取数据

  4. settings.gradle与build.gradle有什么区别

    参考回答 settings.gradle文件是gradle项目的总体配置文件,一般会把子项目中通用的一些配置放在这个文件中,有点雷士与maven的parent pom 文件. build.gradle ...

  5. liferay 7用OSGi的方式修改默认权限

    事先声明,支持这一功能的新版本还没有发布,2017年5月份才支持的 1.以前在62的时候是通过修改ext项目进行修改 2.现在在70可以通过Module Fragment项目进行修改 相关文件:现在出 ...

  6. LintCode刷题笔记-- O(1) Check Power of 2

    标签: 位运算 题目: Using O(1) time to check whether an integer n is a power of 2. 解题思路: 这道题是利用位运算判断一个数是不是2 ...

  7. Spring_Bean的生命周期

    init-method="init" destroy-method="destory" 指定初始化和销毁方法 创建Bean后置处理器 <!-- 实现Bea ...

  8. android 重写系统进度条

    转载自http://blog.csdn.net/codingandroid/article/details/8495074 自定义progressbar现在要自定义一个等待的时候转动的小圈,相信大家也 ...

  9. python HTTP请求过程的两种常见异常

  10. @loj - 2507@ 「CEOI2011」Matching

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 对于整数序列 \((a_1, a_2, ..., a_n)\) ...