h5 添加购物车动画效果实现（贝塞尔曲线）

原创已于 2023-11-24 17:07:39 修改 · 置顶 · 1.9k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

代码可运行

于 2023-11-24 15:28:26 首次发布

 <style>
    .shopBox{
        display: flex;
        justify-content: space-between;
        font-size: 1rem;
        margin-bottom: 20px;
        align-items: center;
        height:60px;
    }
    .shopTBox{
        display: flex;
        align-items: center;
    }
    .shopTBox .iPic{
        width: 5rem;
        height: 5rem;
        border-radius: 50%;
    }
    .carBox{
        position: fixed;
        left:50px;
        bottom:50px;
        width:100px;
        height:100px;
        background-color: pink;
        border-radius: 50%;
        z-index: 10;
    }
    .liACard{
        width:2rem;
        height:2rem;
        background-color: #4a90e1;
        color: #fff;
        font-size: 2rem;
        line-height: 1.7rem;
        text-align: center;
        border-radius: 50%;
    }
    .addTCar{
        position: fixed;
        top:0;
        left:0;
        line-height: 2rem;
        z-index:9;
        text-align: center;
        color: #fff;
        transition: 1s linear;
    }
    .addTCar .iconfont{
        width: 2rem;
        height: 2rem;
        background: #4a90e1;
        border-radius: 50%;
        display: block;
        transition: 1s cubic-bezier(0.5,-0.5,1,1);
    }
    .carBox.animate {
        animation: footer-car-animate 500ms ease-in-out;
    } 
    @keyframes footer-car-animate {
        0% {
            transform: scale(1);
        }
        25% {
            transform: scale(0.8);
        }
        50% {
            transform: scale(1.1);
        }
        75% {
            transform: scale(0.9);
        }
        100% {
            transform: scale(1);
        }
    }
</style>

<body>
    <div class="goodsList">
        
    </div>
    <div class="carBox"> 
    </div> 
    <script>
        var goods = [
            {
                title: 'huas' 
            },
            {
                title: 'df',
                
            },
            {
                title: 'zs',
                
            },
            {
                title: 'dt',
            
            },
            {
                title: 'db',
                
            }
        ];

        class UIGoods{
            constructor(g){
                this.data=g;
                this.choose=0;
            }
        }
        //整个界面的数据
        class UIData{
            constructor(){
                var uiGoods=[];
                for(var i=0;i<goods.length;i++){
                    var uig=new UIGoods(goods[i])
                    uiGoods.push(uig);
                }
                this.goodsContainer=document.querySelector('.goodsList')
                this.car=document.querySelector('.carBox')
                console.log(uiGoods);
                this.uiGoods=uiGoods;
                this.createHTML();
                this.listenEventer();
            }
            createHTML(){
                var html='';
                for(var i=0;i<this.uiGoods.length;i++){
                    var g=this.uiGoods[i];
                    html+=`
                    <div class="shopBox">
                        <div class="shopTBox">
                            <div>
                            </div>
                            <div>
                                ${g.data.title}
                            </div>   
                        
                        </div>
                        <div index="${i}" class="liACard">+</div>
                    </div>`
                }
                this.goodsContainer.innerHTML=html;
            }
            carAnimate(){
                this.car.classList.add('animate');
            }
            //监听各种事件
            listenEventer(){
                //监听购物车图标动画事件,结束后删除animate类dom
                this.car.addEventListener('animationend',function(){
                    this.classList.remove('animate');
                })
            }
            jump(index){
                console.log(this.goodsContainer.children[index]);
                var btnAdd=this.goodsContainer.children[index].querySelector('.liACard');
                var rect=btnAdd.getBoundingClientRect();
                var start={
                    x:rect.left,
                    y:rect.top
                }
                //获取购物车距离左侧，距离顶部的距离
                var carBox=document.querySelector('.carBox').getBoundingClientRect();
                console.log(carBox);
                var end={
                    x:carBox.left+carBox.width/2,
                    y:carBox.top
                }
                //创建动画添加购物车动画效果的盒子
                var div=document.createElement('div');
                div.className='addTCar';
                var i=document.createElement('i')
                i.className='iconfont';
                div.style.transform=`translateX(${start.x}px)`
                i.style.transform=`translateY(${start.y}px)`
                div.appendChild(i);
                document.body.appendChild(div)
                //强行渲染
                div.clientWidth;
                //设置结束位置
                div.style.transform=`translateX(${end.x}px)`
                i.style.transform=`translateY(${end.y}px)`
                div.addEventListener('transitionend',()=>{
                    console.log('动画触发了');
                    div.remove();          
                    this.carAnimate();  

                },{
                    once:true
                })
            }
        }
        
        let zhi=new UIData();
        // //监听点击事件
        // var ui=new UI();
        zhi.goodsContainer.addEventListener('click',function(e){
            console.log(e.target.classList);
            //判断goodsListDom下的class中是否包含liACard属性 
            if(e.target.classList.contains('liACard')){
                var index=+e.target.getAttribute('index')
                zhi.jump(index);
            }
        }) 
    </script>
</body>

标签