<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>使用animate.js</title>

    <script src="../js/vue.js"></script>

    <!--animate,js官网:https://daneden.github.io/animate.css/-->

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

    <style>

        @keyframes bounce-in {

            0%{

                transform: scale(0);

            }

            50%{

                transform: scale(1.5);

            }

            100%{

                transform: scale(1);

            }

        }

        .active{

            transform-origin: left center;

            animation: bounce-in 1s;

        }

        .leave{

            transform-origin: left center;

            animation: bounce-in 1s reverse;

        }

    </style>

</head>

<body>

<div id="app">

    <!--自定义过渡类名

        enter-class

        enter-active-class

        enter-to-class (2.1.8+)

        leave-class

        leave-active-class

        leave-to-class (2.1.8+)

    -->

    <button @click="btnClick">change</button>

    <transition

        name="fade"

        enter-active-class="active"

        leave-active-class="leave"

    >

        <div v-if="show">hello</div>

    </transition>

    <hr>

    <transition

            name="fade2"

            enter-active-class="animated swing"

            leave-active-class="animated shake"

    >

        <div v-if="show">hello</div>

    </transition>

</div>

<script>

    vm = new Vue({

        el: '#app',

        data: {

            show:true

        },

        methods:{

            btnClick:function () {

                this.show = !this.show

            }

        }

    })

</script>

</body>

</html>

Vue使用animate.js的更多相关文章

  1. vue中使用js动画与velocity.js

    一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...

  2. Vue过渡效果之JS过渡

    前面的话 与CSS过渡不同,JS过渡主要通过事件进行触发.本文将详细介绍Vue过渡效果之JS过渡 事件钩子 JS过渡主要通过事件监听事件钩子来触发过渡,共包括如下的事件钩子 <transitio ...

  3. 使用 Vue 和 epub.js 制作电子书阅读器

    ePub 简介 ePub 是一种电子书的标准格式,平时我看的电子书大部分是这种格式.在手机上我一般用"多看"阅读 ePub 电子书,在 Windows 上找不到用起来比较顺心的软件 ...

  4. socket应用(vue、node.js、M站)

    socket应用(vue.node.js.M站) 前言:我们在做一些项目的时候需要做到实时变化, 比如我们有时候有需求会要求我们做一个类似于聊天室的页面 比如有些时候我们对某些东西进行点赞和刷票,需要 ...

  5. vue项目中主要文件的加载顺序（index.html、App.vue、main.js）

    先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...

  6. vue.runtime.esm.js:593 [Vue warn]: Invalid prop: custom validator check failed for prop "value".报错解决

    在uni中使用 picker组件,一直报错 vue.runtime.esm.js:593 [Vue warn]: Invalid prop: custom validator check failed ...

  7. 最新的vue没有dev-server.js文件，如何进行后台数据模拟？

    https://blog.csdn.net/qq_34645412/article/details/78833860 https://blog.csdn.net/qq_34645412/article ...

  8. vue中的js引入图片，必须require进来

    需求:如何components里面的index.vue怎样能把assets里面的图片拿出来. 1.在img标签里面直接写上路径: <img src="../assets/a1.png& ...

  9. require.js 加载 vue组件 r.js 合并压缩

    https://www.taoquns.com 自己搭的个人博客 require.js 参考阮一峰 Javascript模块化编程(三):require.js的用法 r.js 合并压缩 参考司徒正美 ...

随机推荐

  1. Flex TabNavigator

    1.获取子项个数 TabNavigator.numChildren(int) 2.对于静态的TabNavigator的如何处理权限显示 for(var i:int=0;i <tab.numChi ...

  2. k8s、CI/CD、pipline介绍

    参照文档: https://blog.csdn.net/qq_35299863/article/details/84329798 https://github.com/xgh2016/k8s-CICD ...

  3. windows 快捷键 部分

    1.快速启动任务栏锁定的任务 WIN+任务栏任务顺序(左侧开始数) 2.运行 WIN+R mstsc--->远程桌面链接 regedit--->注册表信息 services.msc---& ...

  4. argparse：命令行参数解析详解

    简介# 本文介绍的是argparse模块的基本使用方法,尤其详细介绍add_argument内建方法各个参数的使用及其效果. 本文翻译自argparse的官方说明,并加上一些笔者的理解 Copy im ...

  5. Day03:运算符和表达式 / 分支结构

    Java 运算符 计算机的最基本用途之一就是执行数学运算,作为一门计算机语言,Java也提供了一套丰富的运算符来操纵变量.我们可以把运算符分成以下几组: 算术运算符 关系运算符 位运算符 字符串运算符 ...

  6. Egret入门学习日记 --- 第七篇（书中 3.9节 内容）

    第七篇(书中 3.9节 内容) 好,今天就来看下 3.9节 的内容. 第一点: 昨天就已经搞定了. 第二点: 也包括在昨天的内容了. 第三点: 如果在构造函数里直接引用组件,就会挂掉. 但是把位置变化 ...

  7. Python学习之线程

    8.5 线程 进程:开辟空间,加载数据,资源单位 线程:流水线,执行代码,执行单位 8.5.1 线程的概念 是操作系统能够进行运算调度的最小单位,线程包含在进程中,是进程中的执行单元,一个进程至少包含 ...

  8. Linux字符界面字符颜色显示

    一.字符颜色 #!/bin/bash #字符颜色显示 #-e:允许echo使用转义 #\033[:开始位 #\033[0m:结束位 #\033等同于\e echo -e "\033[30m黑 ...

  9. Logistic回归基础篇之梯度上升算法

    代码示例: import numpy as np import matplotlib.pyplot as plt def loadDataSet(): dataMat = [];labelMat = ...

  10. elasticsearch 冷热数据的读写分离

    步骤 一.冷热分离集群配置 比如三个机器共六个node的es集群. 每个机器上各挂载一个ssd 和 一个sata.每个机器需要启动两个es进程.每个进程对应不同类型的磁盘. 关键配置: node.ma ...