使用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. DB2 runstats、reorgchk、reorg 命令【转载】

    1.runstats runsats可以搜集表的信息,也可以搜集索引信息.作为runstats本身没有优化的功能,但是它更新了统计信息以后,可以让DB2优化器使用最新的统计信息来进行优化,这样优化的效 ...

  2. 3) Maven 目录结构

    进入maven根目录 cmd 命令 tree E:. │ LICENSE.txt │ NOTICE.txt │ README.txt │ ├─bin │ m2.conf │ mvn │ mvn.bat ...

  3. i9-9900k烤机

    新装机一台,记录烤机参数 硬件配置: cpu: i9-9900k 主板:技嘉Z390 AORUS PRO WIFI 内存:海盗船ddr4 3200 显卡:技嘉gtx1080ti 硬盘:三星970Pro ...

  4. （二叉树）Elven Postman -- HDU -- 54444（2015 ACM/ICPC Asia Regional Changchun Online）

    http://acm.hdu.edu.cn/showproblem.php?pid=5444 Elven Postman Time Limit: 1500/1000 MS (Java/Others)  ...

  5. Java内存模型(二)

    volatile型变量的特殊规则 volatile是Java虚拟机提供的最轻量级的同步机制,当一个变量被定义成volatile后,它将具备两种特性,第一是保证此变量对所有线程的可见性,这里的“可见性” ...

  6. Docker搭建 MySQL 主从复制

    为什么选 Docker 搭建主从复制需要两个以上的MySQL, 使用 Docker 非常方便.如果以前没用过,找个简单的文档看看,熟悉一下命令. 搭建过程 1.下载镜像 docker pull mys ...

  7. wc.java

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

  8. Oracle EBS中有关Form的触发器的执行顺序

    http://blog.csdn.net/postfxj/article/details/8135769 触发器执行顺序: 1．  当打开FORM时: (1)       PRE-FORM (2)   ...

  9. delphi 安卓程序如何读取外部配置文件

    1)编辑一个config.txt文件,填写配置系统. 2)有外部加载文件时,安卓发布需要另行指定文件发布目录位置 比如加载config.txt需要在 首先利用Project->Deploymen ...

  10. WindowsPhone 8.1 语音命令资料

    快速入门:语音命令(XAML) http://msdn.microsoft.com/library/windows/apps/xaml/dn630430.aspx/ 语音命令元素和属性参考(XAML) ...