<!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. python mooc 3维可视化<第一周第一单元>

    基本含义 数据->图像 分类 重点关注空间数据的可视化 方法 二维标量数据场 三维标量数据场 二位标量数据场 颜色映射法 等值线法 立体图法 层次分割法 三维标量数据场 面绘制法 体绘制法 展示 ...

  2. python 结构化的数据

  3. Linux 上GCC的静态编译和动态编译

    静态编译 常规编译示例: $gcc xxx.c yyy.c zzz.c -o rslt 注明: gcc编译器会对源文件min.c进行预处理, 编译, 以及链接, 最后生成可执行文件 $gcc -c x ...

  4. onethink上传到服务器（或者迁移）后台登录验证码错误问题

    修改Application\User下面的配置文件config.php, 改成对应服务器上的参数 define('UC_DB_DSN', 'mysqli://root:root@127.0.0.1:3 ...

  5. Java版阿里云通信短信发送API接口实例（新）

    阿里云通信(原名阿里大于)的短信服务(Short Message Service)是阿里云为用户提供的一种通信服务的能力,支持快速发送短信验证码.短信通知等. 完美支撑双11期间2亿用户,发送6亿短信 ...

  6. iOS app发布流程

    http://www.xuebuyuan.com/1980497.html http://blog.csdn.net/alincexiaohao/article/details/38725367 ap ...

  7. js日历

    html部分 <div class="div"> <p><span onclick="syn()">上一年</span ...

  8. 提取网址的python练习

    import urllib, urllib2, cookielib from HTMLParser import HTMLParser import sys reload(sys) sys.setde ...

  9. Oracle日期

    oracle 日期格式 to_date("要转换的字符串","转换的格式")   两个参数的格式必须匹配,否则会报错. 即按照第二个参数的格式解释第一个参数. ...

  10. Django框架form表单配合ajax注册

    总结一下,其实form组件的主要功能如下: 生成页面可用的HTML标签 对用户提交的数据进行校验 保留上次输入内容 下面是写的登录页面的实例 1:views视图中的代码 # 注册页面 def regi ...