مشكلة في عمل الانميشن

لا مشكلة لديك، قمت بإختبار المشروع سواء بشكل محلي أو رابط netlify لا يوجد مشكلة تفقد الفيديو:

ربما المشكلة لديك هي في الكاش (الملفات المؤقتة) حاول إعادة تحديث الصفحة بالضغط على CTRL + F5 أيضًا حاول تحديث المتصفح.

شكرا على ردك اللطيف المشكلة في الflex او ال grid layout  كما في المرفق و ليس في ال masonry layout ، قم بالانتقال الى photos مباشرة لا تطبق الانميشن كذلك الامر اذا اخترت من ال checkbox, فان الانميشن لا تطبق مباشرة

المشكلة تحدث عند الإنتقال من زر all إلى photos وأيضًا videos، لكن لا تحدث عند الإنتقال من videos إلى photos أو العكس، لذا تفقد ما الخطأ في المنطق الخاص بذلك، ربما هناك كلاس لا يتم حذفه أو ما شابه.

شكرا لك على مساعدتي حاولت حذف الكلاس فظهرت مشكلة اخرى و هي اختفاء العناصر لان الكلاس المضاف اليه انميشن  opacity و transform forwards بحيث يطبق جميع الcss عند انتهاء الانيمشين ، و اذا قمت بحذفه تختفي العناصر، هذه المشكلة عقدتني نفسيا و عجزت حتى الآن على حلها، 

هناك خطأين لديك فى الكود .

• اولا فى ملف ال script.js حين تغير ال layout الى ال flex يجب ان يتم استدعاء AOS.refresh() حيث ان ال flex يكون غير مرئى فى بداية تحميل الصفحة ولذلك لا يتم تحميل ال animation حيث يجب ان يكون ظاهر فى الصفحة حتى يعمل جيدا .
• ثانيا فى ملف ال style.css انت تضع ال opacity ب 0 فى ال flex layout للصور لذلك ال animation لا يعمل جيدا يجب ان تحذف ال opacity وتجعلها فقط ب 0 اذا لم يكن قد حدث اى animation .

فى سطر 83 فى ملف ال Script.js قم بتبديل الدالة بهذا الكود

//add active class to the layout style
const layouts=document.querySelectorAll('.layout span')
layouts.forEach(layout=>{
    layout.addEventListener('click',function(){
        if (this.classList.contains('active')) {
            return;
        }
        const dataLayout=this.dataset.layout;
        //add active for layout btns
        layouts.forEach(layout =>{
            layout.classList.remove('active');
        })
        layout.classList.add('active');
        
        
         // Hide all layout containers
    const layoutContainers = document.querySelectorAll('.masonry-gallery');
    layoutContainers.forEach(container => {
      container.classList.remove('active');
    });
    //Remove the animation class from the images,videos (media)
    mediaElements.forEach(function (media) { 
        media.classList.remove('fade-in-up');
     })
     // Show the layout container with the corresponding layout attribute
     const activeContainer = document.querySelector(`.masonry-gallery[data-layout="${dataLayout}"]`);
     activeContainer.classList.add('active');
     //Get the images, vidoes of the active layout
     const images = activeContainer.querySelectorAll('.masonry-image');
     images.forEach(function(img){
        // img.classList.add('fade-in-up');
        // setTimeout(function(){
        //     img.classList.remove('fade-in-up');
        //     // img.classList.add('show')
        // },1000)
     })
    
     if(activeContainer.classList.contains('grid')){
        masonry.layout();
     }
     else{
        AOS.refresh();
     }
    })
})

وفى ملف ال style.css سطر 426 قم بتبديله بهذا الكود 

.gallery-items .flex.masonry-gallery .masonry-image{
    /* width: 18rem; */
    width: 100%;
    height: 25rem;
    margin-right: 0.85rem;
    /* transition: all 0.3s ease-out; */
    /* animation: fadeInUp 1s ease-out forwards ;  */
}
.gallery-items .flex.masonry-gallery .masonry-image:not(.aos-animate) {
    opacity: 0;  
}

وقد قمت برفع الملفات لتستخدمها اذا اردت.

ولكنك ستجد مشكلة اخرى وهى انه يحدث delay فى ال animation وهذا سببه عدة اخطاء فى الكود من ال style و ال js ولكن حاليا ال animation تعمل جيدا.

واذا كان هناك اى شئ اخر فلتخبرنى

script.js style.css

شكرا لك بارك الله فيك و جزاك الله خيرا

لا شكر على واجب.  

واياكم اللهم آمين