ما سبب عند استخدام مكتبة aos يختفي transition

لأنها تطبق خاصية transition خاصة بها على العنصر لكي تحركه وتظهره بسلاسة عند ظهوره على الشاشة، وفي نفس الوقت، أنت لديك خاصية transition أخرى معرفة في حالة :hover بالتالي يحدث تعارض.

وأبسط هو إعادة تعريف خاصية transition بالكامل داخل قاعدة :hover كالتالي:

.my-box {
  background-color: #007bff;
  color: white;
  padding: 20px;
  /* ستضيف AOS خاصية transition هنا تلقائياً */
}

.my-box:hover {
  background-color: #0056b3; 
  transform: translateY(-10px);
  
  transition: background-color 0.3s ease, transform 0.3s ease;
}

أو بطريقة أخرى عليك كتابة Specificity أعلى أي أكثر تحديدًا باستهداف العنصر عندما مُطبق عليه كلاس aos-animate أيضًا وهو الخاص بمكتبة AOS، لفرض تطبيق التنسيق الخاص بك.

.my-box.aos-animate:hover {
  background-color: #0056b3;
  transform: translateY(-10px);
  transition: all 0.3s ease-in-out;
}

لاحظ المُحدد .my-box.aos-animate:hover مُفصل أكثر بالتالي الأولوية الخاصة به أكبر.

اوك أنقذت لكن لم اشيل مؤشر ماوس لا يوجد transition يعني تعود إلى طبيعتها بدون اي جزء ثانية

بتاريخ 6 دقائق مضت قال Hxfhf Ucicic:

اوك أنقذت لكن لم اشيل مؤشر ماوس لا يوجد transition يعني تعود إلى طبيعتها بدون اي جزء ثانية

يمكننا حل هذه النقطة عن طريق وضع transition في الكلاس نفسه، بهذا الشكل:

.my-box {
  background-color: #007bff;
  color: white;
  padding: 20px;

  /*إضافة*/
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.my-box:hover {
  background-color: #0056b3; 
  transform: translateY(-10px);
}

في حين استخدام  aos:

.my-box.aos-animate { 
  transition: background-color 0.3s ease, transform 0.3s ease; 
} 
.my-box.aos-animate:hover { 
  background-color: #0056b3; 
  transform: translateY(-10px); 
}

بهذا الشكل سيكون transition في الدخول والخروج من حالة hover

بالتوفيق