Vue过渡:用Velocity实现JavaScript钩子
Velocity is an animation engine with a similar API to jQuery's $.animate(). It has no dependencies, but will happily extend jQuery, Zepto, and even the native DOM. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling.
一 安装依赖
npm install velocity-animate (这里是1.5.2版本)
文档地址:https://github.com/julianshapiro/velocity/wiki
二 App.vue
<!-- App.vue -->
<template>
<div id="app">
<button @click="show = !show">按钮</button>
<transition
@before-enter="beforeEnter"
@enter="enter"
@leave="leave"
:css="false"
>
<p v-if="show">芒果</p>
</transition>
</div>
</template> <script>
import Vue from "vue";
import Velocity from "velocity-animate"; export default {
name: "app",
data() {
return {
show: false
};
},
methods: {
beforeEnter(el) {
el.style.opacity = 0;
el.style.transformOrigin = "left";
},
enter(el, done) {
// 动画队列
Velocity(el, { opacity: 1, scale: 1.2 }, { duration: 300 });
Velocity(el, { scale: 1 }, { complete: done });
},
leave(el, done) {
// 动画队列
Velocity(el, { translateX: "15px", rotateZ: "50deg" }, { duration: 600 });
Velocity(el, { rotateZ: "100deg" }, { loop: 2 });
Velocity(
el,
{
rotateZ: "45deg",
translateY: "30px",
translateX: "30px",
opacity: 0
},
{ complete: done }
);
}
}
};
</script> <style>
</style>
三 运行效果
Vue过渡:用Velocity实现JavaScript钩子的更多相关文章
- vue过渡 & 动画---进入/离开 & 列表过渡
(1)概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animat ...
- 按照vue文档使用JavaScript钩子但是却不能执行动画?
大家刚入VUE肯定是先去阅读文档, 在 进入/离开 & 列表过渡 这一章节有一小节 --------- JavaScript钩子 详情见vue文档: https://cn.vuejs.or ...
- vue过渡动画效果
1 过渡基础 1.1 过渡的方式 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS ...
- vue 过渡的-css-类名
会有6个css类名在leave/enter过渡中切换 1,v-enter:定义进入过渡的开始状态,在元素被插入时生效,在下一帧中移除 2,v-enter-active:定义过渡的状态.在元素整个过渡过 ...
- Vue过渡和动画效果展示(案例、GIF动图演示、附源码)
前言 本篇随笔主要写了Vue过渡和动画基础.多个元素过渡和多个组件过渡,以及列表过渡的动画效果展示.详细案例分析.GIF动图演示.附源码地址获取. 作为自己对Vue过渡和动画效果知识的总结与笔记. 因 ...
- Vue 过渡
过渡 通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果.Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数 ...
- Vue过渡与动画
通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果.Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数在过渡 ...
- JavaScript 钩子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script s ...
- 050——VUE中使用js库控制vue过渡动作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- adb logcat查看手机端日志
前言 做app测试,遇到异常情况,查看日志是必不可少的,日志如何输出到手机sdcard和电脑的目录呢?这就需要用logcat输出日志了以下操作是基于windows平台的操作:adb logcat | ...
- 初学css 行内元素与块级元素
行内元素与块级元素直观上的区别 1.行内元素会在一条直线上排列,都是同一行的,水平方向排列块级元素各占据一行,垂直方向排列.块级元素从新行开始结束接着一个断行. 2.块级元素可以包含行内元素和块级元素 ...
- vue 跳转页面返回时tab状态有误的解决办法
一.前言 最近在做新vue项目的时候遇到了一个问题,就是tab间的切换没有问题,当跳转到其他页面时,且这个页面并非子路由,再用浏览器的返回按钮返回首页时,tab的active始终指向默认的第一个选项. ...
- Python 中的作用域?
Python 中,一个变量的作用域总是由在代码中被赋值的地方所决定. 当 Python 遇到一个变量的话,它会按照这的顺序进行搜索:本地作用域(Local)--->当前作用域被嵌入的本地作用域( ...
- MVC调用函数function.php
<?php //控制器的调用函数C function C($name, $method){ require_once('/libs/controller/'.$name.'Controller. ...
- 安装Erlang使用RabbitMQ
首先登陆官网进行下载:https://www.erlang.org/downloads/20.3 本次下载的版本是20.3,rabbitmq准备使用3.7.17版本 现在开始安装 因为是使用c#语言, ...
- SQL SERVER将多行数据合并成一行
1)比如表中有三列数据: 2)执行如下查询: SELECT [USER_NAME], [USER_ACCOUNT] , [ROLE_NAME] = stuff(( SELECT ',' + [ROLE ...
- 一、touch.js
一.touch.js 1.引用链接: <script src="https://cdn.bootcss.com/touchjs/0.2.14/touch.min.js"> ...
- ltp-ddt eth iperf
ETH_S_PERF_IPERF_TCP_8K_1448B source 'common.sh'; run_iperf.sh -m -M 1500 -f M -d -t 60 -w 8K run_ip ...
- 对props的研究
Vue.component('my-component', { props: { // 基础的类型检查 (`null` 匹配任何类型) propA: Number, // 多个可能的类型 propB: ...