<!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. 数据库----ORACLE和MYSQL数据库简介

    一.什么是数据库? 数据库(Database---DB)按照组织.储存和管理数据的仓库.(理解以下三个概念)   数据(Data)用来描述事物的记录都可称数据,如文字音乐图像.   数据库系统(Dat ...

  2. TyvjP2018 「Nescafé26」小猫爬山

    P2018 「Nescafé26」小猫爬山 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 Freda和rainbow饲养了N只小猫,这天,小猫们要去爬山.经 ...

  3. Hdu 4597记忆化搜索

    好久没有做题了,水平已经完全在学弟之下了. 一个吉林邀请赛最水的题目.:( 其实这题一看到数据范围,只可以想到思路,直接爆搜,加个记忆化. 这题虽然A了,但是我还是没太想清楚一些边界情况,心虚着A了. ...

  4. 2019.10.22 用TCP实现服务端并发接收

    client import socket client = socket.socket() client.connect( ('127.0.0.1',8888) ) while 1: msg = in ...

  5. Mysql里查询字段为Json格式的数据模糊查询以及分页方法

    public void datagrid(CustomFormEntity customForm,HttpServletRequest request, HttpServletResponse res ...

  6. 2019-10-26-Inno-Setup-安装包脚本-Run-的-Flags-标记

    title author date CreateTime categories Inno Setup 安装包脚本 Run 的 Flags 标记 lindexi 2019-10-26 08:42:39 ...

  7. 封装好的MySQL.class.php类

    封装好的MySQL.class.php类 作用:数据库操作类 <?php header('content-type:text/html;charset=utf-8'); class MySQLD ...

  8. iOS 三种打电话方式

    //1,这种方法,拨打完电话回不到原来的应用,会停留在通讯录里,而且是直接拨打,不弹出提示 NSMutableString * str=[[NSMutableString alloc] initWit ...

  9. GitHub Top 100 Objective-C 项目简介

    主要对当前 GitHub 排名前 100 的项目做一个简单的简介, 方便初学者快速了解到当前 Objective-C 在 GitHub 的情况. 若有任何疑问可通过微博@李锦发联系我 GitHub 地 ...

  10. 利用IDEA构建springboot应用-配置文件

    application.properties配置文件(不建议采用这种配置) 配置文件采用:application.yml文件会更简便,要带空格 属性配置与类中取值 添加bean属性配置到一个类里面,采 ...