使用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. python文件对比

    #-*- encoding:utf-8 -*- class loadDatas(object): def __init__(self): self.path='./data' def load_com ...

  2. 如何将word中的图片和文字导入自己的博客中

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

  3. 8) pom.xml

    http://maven.apache.org/ref/3.3.3/maven-model/maven.html 执行mvn命令的时候默认文件名pom.xml 也可以通过 -f 指定 比如 mvn - ...

  4. 2) 下载Maven

    http://maven.apache.org/ http://maven.apache.org/download.cgi Maven 3.3.3 (Binary tar.gz) Maven 3.3. ...

  5. dlib安装教程(for linux)

    https://blog.csdn.net/LoHiauFung/article/details/78454905 https://www.linuxidc.com/Linux/2017-11/148 ...

  6. MessageBox的常见用法

    一 函数原型及参数 function MessageBox(hWnd: HWND; Text, Caption: PChar; Type: Word): Integer; hWnd:对话框父窗口句柄, ...

  7. ZUFE2389: Occult的卡片升级计划(DP) 2016-05-17 23:12 113人阅读 评论(0) 收藏

    2389: Occult的卡片升级计划 Description Occult喜欢玩一款手游,手游中有很多好看的卡片.他想要升级这些卡. 现在他有m块经验石,目标是强化一张卡片,卡片最开始的时候是0级, ...

  8. 我的成长比价系列：java web开发过程中遇到的错误一：sql语句换行错误

    字符串换行导致的错误,确切的说是马虎的错误,自己在编写简单的servlet项目时,在StudentDao.java 中的  查询语句:String  sql= "SELECT Type,fl ...

  9. SSH中设置字符编码防止乱码

    1.在web.xml中加入一个过滤器和过滤范围的配置 <filter><filter-name>encoding</filter-name><filter-c ...

  10. Android 了解1G 2G 3G 知识

    了解1G 2G 3G 相关知识,对网络通讯制式进行了解即可 1.这种网络通讯制式是一步一步发展起来的,由最开始的1G(最典型的手机,例如:大哥大,1G这种制式只能语音通话). 2.后来出现的2G,2G ...