使用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. 一文读懂:超详细正态分布方差等于o的推导

    (uv)' = [(u+△u)(v+△v) - uv] /△x = (v△u+u△v +△u△v)/△x = v(△u/△x) + u(△v/△x) +(△u△v)/△x =u'v+uv'

  2. go指针的一个小坑

    几乎可以肯定的说,go语言中除了闭包在引用外部变量的时候是传引用的,其他的时候都是传值的.如果你说形参可以定义为指针.好吧,那么告诉你这个指针的值其实是按照传值的方式使用的. 下面看个很浅显的例子: ...

  3. wc.java

    GitHub代码链接 1.项目相关要求 •基本功能列表: -c  统计文件中字符的个数 -w 统计文件中的词数 -l   统计文件中的行数 •拓展功能: -a  统计文件中代码行数.注释行数.空行 2 ...

  4. 软件工程作业 - 实现WC功能（java）

    项目地址:https://github.com/yogurt1998/WordCount 要求 基本要求 -c 统计文件字符数(实现) -w 统计文件单词数(实现) -l 统计文件行数(实现) 扩展功 ...

  5. 简便方法搞定第三方SDK的Jar包在DelphiXE5中的引入

    简便方法搞定第三方SDK的Jar包在DelphiXE5中的引入 (2014-02-21 17:30:17) 转载▼ 标签: android delphi xe5 jar sdk 分类: 编程杂集 折腾 ...

  6. 高并发Web

    hadoop适合处理分布式集群系统,本身是支持高速并发海量数据的写入和读取的.解决大量用户并发访问的方案有很多,给你个千万pv的参考方案:1)架构中直接引入软件名称的模块,是个人推荐使用的,如Hapr ...

  7. 基于vs2012的C# winform抽奖小程序的总结

    哈希表的使用 Hashtable hashtable = new Hashtable(); hashtable.ContainsValue(tmp);//判断哈希表中有没有tmp hashtable. ...

  8. K8S+GitLab-自动化分布式部署ASP.NET Core(三) 更新镜像版本并部署到K8S上

    一.介绍 前一篇,介绍了ASP.NET Core部署到K8S上,下面介绍我们在发布新一版本中怎么通过Gitlab CI自动给镜像打版本并部署到K8S上. 二.我们通过GitLab CI/CD 变量 不 ...

  9. 【cocos2d-x 手游研发----精灵的八面玲珑】

    继续上一篇文章继续聊吧,这章内容会比较多,也会附上代码,很多朋友加了群,大家在群里面探讨了很多东西,这让大家都觉得受益匪浅,这便是极好的,废话不多了,精灵是游戏的重要组成部分,那ARPG里面的精灵必然 ...

  10. c# 求第30位数的值

    1,1,2,3,5,8,13,21,34,55.... 求第30位数的值: 递归方法: class Program { static void Main(string[] args) { //找规律: ...