vue中的半程动画

vue中使用css和第三方库完成的动画都是全程动画(又开始,有结束),当有些需求只需要又开始的动画,不需要有结束的动画时(加入购物车时,有一个小球慧聪商品按钮区域,运动到购物车图标上,并不会返回回去),他们两个不会满足需求

此时vue为我们提供了

JavaScript 钩子可以满足需求

<transition

v-on:before-enter="beforeEnter"

v-on:enter="enter"

v-on:after-enter="afterEnter"

v-on:enter-cancelled="enterCancelled"

v-on:before-leave="beforeLeave"

v-on:leave="leave"

v-on:after-leave="afterLeave"

v-on:leave-cancelled="leaveCancelled"

</transition>

共提供了8个钩子函数,将这些函数定义到methods中,我们写加入购物车小球动画时,只需要前三个钩子函数即可

// 注意:动画钩子函数的第一个参数:el 表示 要执行动画的那个DOM元素,是个原生的 JS DOM对象

// 可以认为,el是通过document.getElementById(‘‘)方式获取到的原生JS DOM对象

// 动画入场之前,动画还未开始,可以在这里设置元素的其实位置

beforeEnter(el){

el.style.transform="translate(0,0)"

},

// 动画开始之后的样式,可以在这里设置元素完成动画之后的,结束状态

enter(el,done){

// el.offsetWidth没有实际的作用,但是,如果不写,出不来动画效果,可以认为他表示强制动画刷新

el.offsetWidth

el.style.transform="translate(150px,450px)"

el.style.transition="all 1s ease"

done()

},

// 动画页面前

afterEnter(el){

// el.style.opacity= 0

this.flage=!this.flage

}

小球的样式自己写,这是个模仿加入购物车的小动画,可根据自己的实际需求进行更改

原文地址:https://www.cnblogs.com/Progress-/p/12034420.html

时间: 2024-10-08 02:02:00

vue中的半程动画的相关文章

Vue中过渡与动画

1.元素的显示与隐藏,实现过渡动画效果 (1)为目标元素添加一个父元素 transition,并添加name属性 在目标元素中添加v-show=“isShow”  isShow为Vue中的data 添加button按钮控制“isShow的值 <div id="demo"> <button @click="isShow = !isShow">点击这里变色</button> <transition name="isd&

Vue 中的动画特效

Vue 中的动画特效 CSS 实现标签显隐 <!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-U

Vue中的动画效果

Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库,如 Velocity.js 下面分别从这个4个工具来学习Vue动画效果. 一.单元素/组件的过渡 Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进

05.vue中js动画与Velocity.js的结合

vue中js动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中js动画</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head>

better-scroll在vue中的坑

在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,以滴滴为例,可以是这样竖向滚动的列表,如图所示: 也可以是横向滚动的导航栏,如图所示: 可以打开"微信 -> 钱包->滴滴出行"体验效果. 我们在实现这类滚动功能的时候,会用到我写的第三方库,better-scroll. 什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里.better-scroll

vue中使用BetterScroll(网上)

原文链接 BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件(GitHub地址),有下列功能支持滚动列表,下拉刷新,上拉刷新,轮播图,slider等功能.为了满足这些功能,better-scroll通过使用惯性滚动.边界回弹.滚动条淡入淡出来确保滚动的流畅.同时还支持很多API和事件,具体支持的事件可以查看官网讲的非常详细.由于它基于原生JavaScript 实现,不依赖任何框架,所以既可以原生 JavaScript 引用,也可以与目前前端 MVVM 框架结合使用,比如,其

在Vue中使用 animate.css 库

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>在Vue中使用 animate.css 库</title> <script src="./vue.js"></script> <link rel="stylesheet" type=&qu

Vue中的JS与Velocity.js的结合

JS动画效果,注意事件函数中所传递的传递的参数及某些事件函数返回的函数 1.进入动画钩子:before-enter,enter,after-enter; 2.离开动画钩子:before-leave,leave,after-leave; 3.在enter钩子中的函数调用done()告诉Vue,JS动画完成. 4.使用velocity.js动画库实现动画:Velocity(el,{样式属性},{duration:1000,complete:done}) <!DOCTYPE html> <ht

vue中加载three.js的gltf模型

vue中加载three.js的gltf模型 一.开始引入three.js相关插件.首先利用淘宝镜像,操作命令为: cnpm install three //npm install three也行 二.three.js中所有的控件插件,都可以在node_modules下面的three里面找到 三.安装好以后,在页面中引入three.js并使用:在所调用页面引入的代码为 import * as THREE from "three"; import { GLTFLoader } from &