css3的animation实现购物车小球飞入效果

最新推荐文章于 2024-05-06 14:19:58 发布

guxiansheng1991

最新推荐文章于 2024-05-06 14:19:58 发布

阅读量1.2w

点赞数 2

分类专栏： css3 文章标签： animation css3

本文链接：https://blog.csdn.net/guxiansheng1991/article/details/79781519

版权

css3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一.思路

这里写图片描述
1.在body下添加5个元素并绝对定位,且display:none;(5个元素是防止用户连续点击)
2.单机页面的某一处位置,并将第一个dispaly:none;的dom定位到单机位置
3.使用css3将定位后的dom运动到目标,并去除style,设置display:none;

二.实现

html

<body>
    <p>在页面的任何位置点击,将有一个小球飞入类为d-targer圆形容器中,可以连续点击</p>
    <div id="ttt" class="d-target"></div>
</body>

css

.d-target{
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    border-radius: 50%;
    position: absolute;
    left: 100px;
    bottom: 100px;
}

.outer{
    width: 30px;
    height: 30px;
    position: absolute;
    left: 0px;
    top: 0px;
    transition: all 0.35s linear;
}
.outer .inner{
    width: 30px;
    height: 30px;
    background: #ccc;
    border-radius: 50%;
    transition: all 0.35s cubic-bezier(0.39,-0.4,0.83,0.23);
    position: absolute;
}
.outer.point-pre{
    display: none;
}

window.onload = function () {
    /* add elements */
    function addElements(CLASSNAME_OUTER,CLASSNAME_INNER) {
        var outerWrapper = document.createElement('div');
        var outer = null;
        var inner = null;
        for (var i = 0; i< 5; i++) {
            outer = document.createElement('div');
            outer.classList.add(CLASSNAME_OUTER);
            outer.classList.add('point-pre');
            // outer.setAttribute('class', CLASSNAME_OUTER+" point-pre");
            // outer.setAttribute('myshow', 'hide');
            inner = document.createElement('div');
            inner.setAttribute('class', CLASSNAME_INNER);
            outer.appendChild(inner);
            outerWrapper.appendChild(outer);
            inner = null;
            outer = null;
        }
        document.body.appendChild(outerWrapper);
        return outerWrapper;
    }

    /* 获取终止点的相对于窗口的坐标 */
    function getEndCoordinate (ele) {
        var left = ele.offsetLeft;
        var top  = ele.offsetTop;
        return [left,top];
    }

    /* 获取outer下myshow属性为hide的第一个元素 */
    function getElementMyShowHide (parentElement,CLASSNAME_SHOW_NONE) {
        var result = null;
        var childElements = parentElement.getElementsByClassName(CLASSNAME_SHOW_NONE);
        result = childElements[0];

        return result;
    }

    var CLASSNAME_OUTER = 'outer';
    var CLASSNAME_INNER = 'inner';
    // 增加小球元素
    var outerWrapper = addElements(CLASSNAME_OUTER,CLASSNAME_INNER);
    var endLeft = getEndCoordinate(document.getElementById('ttt'))[0];
    var endTop  = getEndCoordinate(document.getElementById('ttt'))[1];

    // 真实中的购物车实现是这里的click事件绑在添加购物车的按钮或者类似按钮的dom上
    window.addEventListener('click', function (event) {
        // 当双击的时候,小球会从(0,0)的位置落入目标区,以下为当双击的时候,只会第一次点击的setTimeout会被清除
        // 所以只会显示一次从点击地点到目标区的运动
        // 但是依然会执行第一次的逻辑,因为内部两个setTimeout没有被清除
        clearTimeout(timer);
        var timer = setTimeout(function () {
            var left = event.offsetX;
            var top  = event.offsetY;
            // 定位球元素
            var childElement = getElementMyShowHide(outerWrapper,'point-pre');
            childElement.style.left = left + 'px';
            childElement.style.top = top + 'px';
            // 计算坐标差
            var leftDifference = -(left - endLeft);
            var topDifference = -(top - endTop);
            // 开始
            childElement.classList.remove('point-pre');
            setTimeout(function () {
                childElement.getElementsByClassName('inner')[0].style.transform = `translateY(${topDifference}px)`;
                childElement.style.transform = `translateX(${leftDifference}px)`;
                setTimeout(function () {
                    childElement.getElementsByClassName('inner')[0].setAttribute('style', '');
                    childElement.setAttribute('style', '');
                    childElement.classList.add('point-pre');
                }, 350);
            }, 1);
        }, 30);
    });
}

三.关于动画

<div class="outer">
    <div class="inner"></div>
</div>

实现曲线运动是使用如上dom结构,
运动的时候,让outer进行水平运动(tanslateX(n)),让inner进行垂直运动(translateY(n))
当然这不会出现想要的曲线运动
outer会沿着x轴运动,inner会出现想要的曲线运动,这时outer就不需要被看到,可以设置无背景或者背景透明

guxiansheng1991

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
css3的animation实现购物车小球飞入效果

一.思路 1.在body下添加5个元素并绝对定位,且display:none;(5个元素是防止用户连续点击) 2.单机页面的某一处位置,并将第一个dispaly:none;的dom定位到单机位置 3.使用css3将定位后的dom运动到目标,并去除style,设置display:none;二.实现html&lt;body&gt; &lt;p&gt;在页面的任何位置点击,...
复制链接

扫一扫