使用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. Caused by: java.lang.IllegalArgumentException: error at ::0 can't find referenced pointcut aaa

    这个错误是说,找不到这个注释: 解决方案: 1.更改自己本机的jdk版本(我的更改了无效): 在工程选择框内点击右键--->build path----->Library--->ad ...

  2. cxf-rs client 调用

    org.apache.cxf.jaxrs.client.WebClient get调用 @GET @Path("/echo/{input}") @Produces("te ...

  3. 配置 cxf-ws spring bean 文件

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  4. （二分匹配 模板 KM）奔小康赚大钱--hdu--2255

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=2255 代码: #include <iostream> #include <cstdio ...

  5. C++实现wc.exe程序

    github项目地址:https://github.com/insomniali/wc 基本功能 wc.exe -c file     统计文件file的字符数  [实现] wc.exe -w fil ...

  6. [label][JavaScript]七个JavaScript技巧

    重点:http://www.javascriptkit.com/ create an object: var car = new Object(); car.colour = 'red'; car.w ...

  7. JWT+ASP.NET MVC 时间戳防止重放攻击

     时间戳作用 客户端在向服务端接口进行请求,如果请求信息进行了加密处理,被第三方截取到请求包,可以使用该请求包进行重复请求操作.如果服务端不进行防重放攻击,就会服务器压力增大,而使用时间戳的方式可以解 ...

  8. jzoj5806

    我們發現,如果有奇環顯然無解,因為我們每一次合併一個奇環,一定會產生一個偶環和一個更小的奇環,最終會形成一個三元環而無法合併 所以,這個圖需要是一個二分圖,需要進行二染色 然後把這個圖所有的偶環找出來 ...

  9. Python拾遗

    for...else...语句 用 break 关键字终止当前循环就不会执行当前的 else 语句,而使用 continue 关键字快速进入下一论循环,或者没有使用其他关键字,循环的正常结束后,就会触 ...

  10. 一分钟搞懂 JavaScript this 指向问题

    关于Javascript的this指向问题,网络上有很多分析文章,写的很好,比如这里和这里 我这里做一个简单的总结. 箭头函数的 this 箭头函数内的this指向外层函数定义时所在的作用域.如果没有 ...