使用vue模拟购物车小球动画

1.效果演示

2.相关代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <script src="../js/vue-resource-1.3.4.js"></script>

    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <style>

        .ball {

            width: 15px;

            height: 15px;

            border-radius: 50%;

            background-color: red;

        }

    </style>

</head>

<body>

<div id="app">

    <input type="button" value="快到碗里来" @click="flage=!flage">

    <!--1.使用transition元素 把小球包裹起来-->

    <transition

            @before-enter="beforeEnter"

            @enter="enter"

            @after-enter="afterEnter"

    >

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

    </transition>

</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            flage: false

        },

        methods: {

            //钩子函数的第一个参数el:表示要执行动画的那个元素 是个原生的js dom对象

            //document.getElementById() 可以认为他是通过这种方式获取的

            beforeEnter:function (el) {

                //beforeEnter表示动画入场之前 动画开始 可以再beforeEnter中设置元素的起始样式

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

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

            },

            enter:function (el,done) {

                //这句话没有实际的作用 但是不写出不来效果

                //el.offsetWidth可以认为可以强制刷新动画

                el.offsetWidth

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

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

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

                done()

            },

            afterEnter:function (el) {

                //动画完成后

                this.flage=!this.flage;

            }

        }

    })

</script>

</body>

</html>

使用vue模拟购物车小球动画的更多相关文章

  1. Vue实现购物车小球动画

    思路: 1.因页面分组件分的比较细,由图可知是组件5到组件4的联动. 如果利用组件间通信需要 子组件5 -->组件3-->所有组件的父组件-->组件4, 层级略显复杂,所以使用了vu ...

  2. vue.js加入购物车小球动画

    生成一个动画小球的div,并且生成五个小球,五个是为了生成一定数量的小球来作为操作使用,按照小球动画的速度,一般来说五个也可以保证有足够的小球数量来运行动画 动画的内容分别是外层和内层,外层控制动画小 ...

  3. css贝塞尔曲线模仿饿了么购物车小球动画

    在线观看贝塞尔曲线值:传送门 在线观看动画效果:传送门 代码: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  4. Vue实现购物小球抛物线

    .shop{ position: fixed; top: 300px; left: 40px; } .ball{ position: fixed; left: 32px; bottom: 22px; ...

  5. vue 2.0 购物车小球抛物线

    备注:此项目模仿 饿了吗.我用的是最新的Vue, 视频上的一些写法已经被废弃了. 布局代码 <div class="ball-container"> <trans ...

  6. 使用CSS3动画模拟实现小球自由落体效果

    使用纯CSS代码模拟实现小球自由落体效果: html代码如下: <div id="ballDiv"> <div id="ball">&l ...

  7. “完美”解决微信小程序购物车抛物动画，在连续点击时出现计算错误问题，定时器停不下来。

    最近做,微信点餐小程序,遇到添加商品时出现抛物动画,参考借鉴了这位大神的方法 https://www.cnblogs.com/greengage/p/7815842.html 但出现了一个问题,连续点 ...

  8. 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js

    在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...

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

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

随机推荐

  1. Nginx中间件使用心得（三）

    一.Nginx搭建系统需求 1.系统硬件:CPU >= 2Core,内存 >= 256M      2.自行搭建服务器(Linux操作系统) (1) 使用vmWare虚拟服务器 (2)使用 ...

  2. DIV+CSS实战（五）

    一.说明 前面实现了关键词订阅模块,现在实现站点订阅模块,主要实现的是站点添加界面.站点添加界面里面实现一个提示框不在提示的功能(保存到cookie中),还有就是实现一个站点的选择框,包括输入文字自动 ...

  3. Android真机调试试验

    之前一直使用模拟器,很不好用,今天使用真机调试试验. 准备材料:电脑,Android手机. 首先,就遇到了一个问题,我的手机是华为的,之前不知道怎么回事,打开调试总是自动关闭,而且切换总是切换不了,老 ...

  4. 西邮Linux兴趣小组2014级免试挑战题 (续）

    在上一篇的博客中已经解到第四关了,现在继续挑战-- [ 第四关] 在上一关解压成功后,生成了一个file文件.用vim的二进制格式打开,转成十六进制,发现文件头格式如下: 是个以ELF字符开头的文件, ...

  5. node csv

    想实现下载csv文件的功能,内容放在mysql的blob中,在网上找的都是关于csv模块的. 由于csv的更新,网上的很多方法都用不了,比如csv(),现在已经变了:http://csv.adalta ...

  6. Delphi事件的广播 转

    http://blog.sina.com.cn/s/blog_44fa172f0102wgs2.html 原文地址:Delphi事件的广播 转作者:MondaySoftware 明天就是五一节了,辛苦 ...

  7. 解决 Eclipse Indigo 3.7、ADT 中文字体偏小，完美 Consolas 微软雅黑混合字体！

    Eclipse是著名的跨平台的自由集成开发环境(IDE).6月22日Eclipse 3.7 正式发布,代号是 Indigo . 在 Windows 7 下初始后化,发现界面变化不大,但中文字体却面目全 ...

  8. AndroidPn消息推送

    接着前面的工作,消息接收之后,要推送给不同的客户端.关于消息推送,网上有很多方式,http长连接,xmpp协议,还有一个谷歌的貌似叫C2DM的东西. 在此之前,用openfire做了一个小demo,例 ...

  9. DBCC--CHECKIDENT

    检查活或重置自增键的标识值,可以使用NORESEED 来检查当前标识值和标识列在表中的最大值. 如果当前标识值与表中数据冲突或希望将标识值重置到一个较小的值时,可以只用RESEED 来设置 DBCC ...

  10. JS代码指导原则

    一.什么是平稳退化? 如果含有JS代码的网页在用户浏览器不支持JS(或者禁用JS)时,用户仍然能够顺利浏览(网站功能正常,只是视觉效果可能差一些),那么这个网页就能够平稳退化 网页能够平稳退化是很必要 ...