购物车小球动画

最新推荐文章于 2024-05-23 23:33:04 发布

宫商羽

最新推荐文章于 2024-05-23 23:33:04 发布

阅读量125

点赞数

文章标签： javascript css3 html

本文链接：https://blog.csdn.net/m0_65349389/article/details/130186157

版权

小球落入下方

// 创建小球添加动画
  const createBall = (left, top) => {
    // 创建div元素
    let Ball = document.createElement('div')
    // 给div定位
    Ball.style.position = "absolute";
    // div的left和span的left是一样的
    Ball.style.left = left + 'px'
    // div的top和span的top是一样的
    Ball.style.top = top + 'px'
    Ball.style.width = '20px'
    Ball.style.height = '20px'
    Ball.style.borderRadius = '50%'
    Ball.style.backgroundColor = 'red'
    // 贝塞尔曲线
    Ball.style.transition = "left .6s linear, top .6s cubic-bezier(0.5, -0.5, 1, 1)";
    // 向父元素最后添加
    document.body.appendChild(Ball);
    // 添加动画属性
    setTimeout(() => {
      Ball.style.left = Getcollect().offsetLeft + Getcollect().offsetWidth / 2 + "px";
      Ball.style.top = 500 + "px";
    }, 0);
    //动画结束后，删除自己
    // ontransitionend事件 是在 transition过度完之后执行的 
    Ball.ontransitionend = function () {
      Ball.remove();
    };
  }

点击加号弹出减号，收起

.qiu-enter {
    animation: enter 500ms linear;
}

@keyframes enter {
    0% {
        transform: translateX(38px) rotate(0deg);
        opacity: 0;
    }

    100% {
        transform: translateX(0px) rotate(-360deg);
        opacity: 1;
    }
}

.qiu-exit {
    opacity: 0;
    animation: exit 500ms linear;
}

@keyframes exit {
    0% {
        transform: translateX(0px) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateX(38px) rotate(360deg);
        opacity: 0;
    }
}