اذهب إلى المحتوى

السؤال

نشر

السلام عليكم, 

أردت إضافة حركة طياران صورة المنتج إلى سلة الشراء واجهت بعض المشاكل مثل :

-تحديد مكان السلة 

-حساب البعد بينها 

-تحريك الصورة 

الشيفرة كانت كالتالي (بشكل مختصر) :

  <li data-product-count="0"   class="shopping-cart w-16   before:content-[attr(data-product-count)] before:w-5 before:h-5 before:rounded-full before:absolute before:bg-green-400 relative before:left-0 before:-top-2 before:-right-2 before:flex before:justify-center before:items-center border-[1px] rounded-xl   transition-all duration-5 "  data-totalitems="0" ><a href="{{ route('cart.index') }}" >  <i
                                        class="transition-all duration-1000 fa-solid fa-cart-plus"></i></a></li>


...nav  
...
...code 


                                 <a href="javascript:void(0)" id="" class="add-to-cart  " >
                                    <span class=" "></span>
                                        <button
                                            class="  border rounded-lg border-orange-400  p-1 lg:left-[-1.2rem] lg:top-[-1.2rem] left-[-1.2rem] top-[-1.2rem] absolute bg-white">
                                            <i class="fa-solid fa-cart-plus text-orange-400 hover:text-black "></i>
                                        </button>
                                    </a>
...code 

...

style 


.flying-img {
    position: absolute;
    animation: fly_to_cart 1s ease-in-out;
}

@keyframes fly_to_cart {
    0% {
        left: 0;
        top: 0;
    }
    45%, 50% {
        left: var(--left);
        top: 60px;
    }
    80%, 90% {
        left: var(--left);
        top: var(--top);
        transform: scale(.2);
    }
    100% {
        left: calc(var(--left) + 40px);
        top: var(--top);
        transform: scale(.2);
    }
}

js ;

      
const shopping_cart = document.querySelector('.shopping-cart');
const cart_btns = document.querySelectorAll('.add-to-cart');

        // Fly To Shopping Cart Effect

        
        for (cart_btn of cart_btns) {
   
    cart_btn.onclick = (e) => {
        shopping_cart.classList.add('active');


        let product_count = Number(shopping_cart.getAttribute('data-product-count')) || 0;
        shopping_cart.setAttribute('data-product-count', product_count + 1);

        // finding first grand parent of target button 
        let target_parent = e.target.parentNode.parentNode.parentNode.parentNode.parentNode;
        target_parent.style.zIndex = "9000000000000";
        // Creating separate Image
        let img = target_parent.querySelector('img');
        console.log(img);
        let flying_img = img.cloneNode();
        flying_img.classList.add('flying-img');

        target_parent.appendChild(flying_img);

        // Finding position of flying image
       
        const flying_img_pos = flying_img.getBoundingClientRect();
        const shopping_cart_pos = shopping_cart.getBoundingClientRect();
        const ep = cart_btn.getBoundingClientRect();
      

        let data = {
            el:ep.left,
            et:ep.top,
            left: shopping_cart_pos.right - (shopping_cart_pos.width / 2 + flying_img_pos.right + flying_img_pos.width / 2),
            top: shopping_cart_pos.top - flying_img_pos.top +30
        }

        // alert(data.top)

   

        flying_img.style.cssText = `
                                --left : ${data.left.toFixed(2)}px;
                                --top : ${data.top.toFixed(2)}px;
                                --t : ${data.el.toFixed(2)}px;
                                --e : ${data.et.toFixed(2)}px;
                                `;

         setTimeout(() => {
            target_parent.style.zIndex = "";
            target_parent.removeChild(flying_img);
            shopping_cart.classList.remove('active');
        }, 1000);
    }

النتيجة لم تكن كما ارجوا لهذا هل من تصحيح او طريقة اخرى 

شكرا لكم

 

Recommended Posts

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...