ابراهيم الخليل سماني نشر 1 أكتوبر 2022 أرسل تقرير مشاركة نشر 1 أكتوبر 2022 السلام عليكم, أردت إضافة حركة طياران صورة المنتج إلى سلة الشراء واجهت بعض المشاكل مثل : -تحديد مكان السلة -حساب البعد بينها -تحريك الصورة الشيفرة كانت كالتالي (بشكل مختصر) : <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); } النتيجة لم تكن كما ارجوا لهذا هل من تصحيح او طريقة اخرى شكرا لكم اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 1 أكتوبر 2022 أرسل تقرير مشاركة نشر 1 أكتوبر 2022 هل يمكنك مشاركة ملفات المشروع حتى استطيع الاطلاع على المشكلة بشكل افضل اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
ابراهيم الخليل سماني
السلام عليكم,
أردت إضافة حركة طياران صورة المنتج إلى سلة الشراء واجهت بعض المشاكل مثل :
-تحديد مكان السلة
-حساب البعد بينها
-تحريك الصورة
الشيفرة كانت كالتالي (بشكل مختصر) :
style
js ;
النتيجة لم تكن كما ارجوا لهذا هل من تصحيح او طريقة اخرى
شكرا لكم
رابط هذا التعليق
شارك على الشبكات الإجتماعية
1 جواب على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.