使用钩子函数模拟小球半场动画

深碍√TFBOYSˉ_ 2021-12-16 19:43 240阅读 0赞

<!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>Title</title>

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

<style>

.ball \{

width: 15px;

height: 15px;

">red;

border-radius: 50%;

\}

</style>

</head>

<body>

<div id="app">

<input type="button" value="加入购物车" @click="flag=!flag">

<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">

<div class="ball" v-show="flag"></div>

</transition>

</div>

<script>

const vm = new Vue(\{

el: '\#app',

data: \{

flag: false,

\},

methods: \{

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

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

beforeEnter(el) \{

//beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式

//设置小球开始动画之前的，起始位置

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

\},

enter(el, done) \{

//这句话没有实际作用，但是，如果不行 出不来动画效果;可以认为 el.offsetWidth 会强制动画刷新

el.offsetWidth;

//enter 表示动画 开始之后的样式，这里可以设置小球完成动画之后的，结束状态

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

el.style.transition = 'all 1s ease';

//这里的 done ，开始就是afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用

done();

\},

afterEnter(el) \{

//动画完成之后，会调用 afterEnter

this.flag = !this.flag

\}

\}

\});

</script>

</body>

</html>

转载于:https://www.cnblogs.com/lujieting/p/10447954.html

发表评论取消回复

表情：

评论列表（有 0 条评论，240人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 动画-使用钩子函数模拟小球半场动画(模拟购物车添加动画)

vue 动画-使用钩子函数模拟小球半场动画(模拟购物车添加动画) <!DOCTYPE html> <html lang="en"> <h

Love The Way You Lie/ 2023年06月29日 05:53/ 0 赞/ 31 阅读

相关 vue使用钩子函数实现动画的效果

JavaScript 钩子可以在属性中声明 JavaScript 钩子 <transition v-on:before-enter=“beforeEnter”

野性酷女/ 2023年05月29日 03:16/ 0 赞/ 18 阅读

相关（十二）小球动画实现

在商品页面，当我们添加商品的时候，即点击“+”按钮，会有一个小球做抛物线的动作降到左下角的购物车里面的动作，现在就讲讲如何实现小球做抛物线的动作。 ![20180505091

偏执的太偏执、/ 2022年05月25日 00:53/ 0 赞/ 191 阅读

相关聊聊两场球

这是杂货铺的第459篇文章国安前两轮亚冠小组赛，1平1负，出线形势很危险，但本轮客场对阵泰国武里南，曾经1:0战胜全北现代的泰国球队，不能算是善茬儿。

逃离我推掉我的手/ 2022年04月24日 05:44/ 0 赞/ 183 阅读

相关 vue中动画函数钩子js动画

1. 动画开始：@before-enter @before-leave 动画过程： @enter @leave 在这个

系统管理员/ 2022年04月15日 03:45/ 0 赞/ 294 阅读

相关 vue 使用JavaScript 钩子实现半场动画

参考视频黑马程序员 vue教程 vue JavaScript 钩子官方文档： [https://cn.vuejs.org/v2/guide/transitions.ht

「爱情、让人受尽委屈。」/ 2022年04月01日 06:39/ 0 赞/ 236 阅读

相关 css动画小案例弹力球

什么是 CSS3 中的动画？动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。用百分比

系统管理员/ 2022年03月25日 03:28/ 0 赞/ 332 阅读

相关使用钩子函数模拟小球半场动画

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"

深碍√TFBOYSˉ_/ 2021年12月16日 19:43/ 0 赞/ 241 阅读

相关 Vue教程(动画-半场动画)

上篇文章我们介绍了过渡动画的实现，包括完整的入场和离场动画，但是在实际过程中我们有时可能仅仅需要使用半场动画，比如淘宝购物车的下单处理等。 ![在这里插入图片描述

心已赠人/ 2021年11月29日 11:04/ 0 赞/ 367 阅读

相关 Vue中JavaScript钩子transition圆点半场动画（加入购物车）

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8">

以你之姓@/ 2021年10月19日 07:08/ 0 赞/ 266 阅读