专栏首页Spring相关使用vue模拟购物车小球动画

使用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 条评论
登录 后参与评论

相关文章

  • Vue使用过渡类名实现动画和自定义前缀

    Dream城堡
  • 使用BigDecimal 进行浮点值的精确计算

    输出打印为: b1=>7.2882 b2=>7.1 7.22-7.0=0.1882

    Dream城堡
  • Springboot之Actuator的使用解析

    Actuator是spring boot提供的对应用系统的自省和监控的集成功能,可以对应用系统进行配置查看、相关功能统计等。

    Dream城堡
  • 基于WebGL的超逼真仿透明液体流动变形效果教程

    这是一款基于WebGL的超逼真液体流动变形效果。该效果使用PixiJS和GSAP来制作,以轮播图的方式来展现不同类型的液体流动变形效果。液体流动变形效果共5组...

    用户5997198
  • 移动端minimvvm框架qvm实现

    gitHub地址 1,移动端minimvvm框架qvm实现 qvm概念,一个适用于移动端的mini mvvm(什么是mvvm?没了解的同学自己去了解)框架。参考...

    IMWeb前端团队
  • 移动端minimvvm框架qvm实现

    qvm概念,一个适用于移动端的mini mvvm(什么是mvvm?没了解的同学自己去了解)框架。参考了angular和vuejs的设计实现思路,并进行简化封装,...

    IMWeb前端团队
  • 强大的jQuery图片查看器插件使用教程

    Youngxj
  • 13-猜数:基础实现

    凯茜的老爸
  • 那些延时加载图片的开源插件

    图片延时加载技术对大流量的网站来说是十分实用的。目前图片在网站中大量使用,如果不加处理的话会对服务器和带宽造成级大压力,通过只渲染当前用户可见区域的图片,可以极...

    疯狂的技术宅
  • 【技术创作101训练营】innerHTML插入运行js字符串问题探究

    有两个功能, 一个是可以获取指定DOM的HTML元素, 另一个就是替换指定DOM的HTML元素

    治电小白菜

扫码关注云+社区

领取腾讯云代金券