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

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

1.效果演示

image

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程

【CSS】格仔背景

CSS代码 * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } bod...

262100
来自专栏一个爱吃西瓜的程序员

Web前端基础【2】--CSS基础

CSS指层叠样式表,用来定义如何显示HTML元素,一般和HTML配合使用。CSS样式表的目的是为了解决内容与表现分离的问题:即使同一个HTML文档也能表现出外观...

36160
来自专栏keyWords

前端面试题2(CSS)

对BFC规范(块级格式化上下文:block formatting context)的理解?

22310
来自专栏用户2442861的专栏

HTML/CSS基础知识学习笔记

http://www.cnblogs.com/scue/p/4276339.html

18310
来自专栏知道一点点

【原创】bootstrap框架的学习 第五课

<h2>引导主体副本</h2> <p class="lead">这是一个演示引导主体副本用法的实例。</p>

9230
来自专栏淡定的博客

css3的一些新属性总结

box-sizing规定了盒子的计算方式,常用于消除hover时,盒子之间的影响,有三个属性:

8610
来自专栏AndroidTv

前端入门4-CSS属性样式表声明正文-CSS属性样式表

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

11830
来自专栏Android干货

CSS基本知识(慕课网)

40360
来自专栏十月梦想

表格属性(特有)

       设置边框前提border-collapse取值为sparete(不合并),

10430
来自专栏欧阳大哥的轮子

iOS界面布局的核心以及TangramKit介绍

TangramKit是iOS系统下用Swift编写的第三方界面布局框架。他集成了iOS的AutoLayout和SizeClass以及Android的五大容器布局...

13830

扫码关注云+社区

领取腾讯云代金券