1

مرحبا ! كمان سؤال😁

هل يمكن جعل العنصر الذي له انميشن يتوقف على الحالة التي ينتهي بها الانميشن اي لا يعود الى وضعه الافتراضي بعد انتهاء الانميشن

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

1
waelaljamal أضف ردا

أرجو مشاركة الشيفرة أو الطريقة التي تحرك بها العنصر.

0
Elalfi_Web أضف ردا

إن كنت تستعمل CSS لتحريك العنصر فيمكنك أن تقوم بإضافة الخاصية  animation-fill-mode بقيمة forwards إلى العنصر، على النحو التالي:

<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-fill-mode: forwards; /* لجعل العنصر على حالته الأخيرة */
}
@keyframes example {
  from {top: 0px;}
  to {top: 200px; background-color: blue;}
}
</style>

<body>
    <div></div>
</body>

في المثال السابق سوف يتحرك العنصر div ويتغير لونه إلى الأزرق وفي نهاية التحريك سوف يظل على نفس الحالة ونفس المكان.

يمكنك أن تقرأ أكثر حول الخاصية animation-fill-mode من خلال موسوعة حسوب من هنا:

0
Alasdee_Ali أضف ردا

تمام شكراً

بس ليش فقط خاصية

opacity:0;

هي الي تطبق وخاصية

display:none;

تتطبق

علما الن العنصر الذي لدي هو عبارة عن باركراف

0
Elalfi_Web أضف ردا

الخاصية opacity تقوم بتعديل الشفافية الخاصة بالعنصر وبالتالي سوف يظل العنصر مكانه حتى ولو كان شفاف بالكامل، بينما الخاصية display تتحكم في طريقة عرض العنصر وهي من الخصائص التي لا يمكن تطبيق animation عليها في CSS3. ولحل هذه المشكلة يمكنك أن تقوم بإستخدام height: 0 مع opacity: 0 للحصول على تأثير مشابهة، كالتالي:

<style>
p {
  animation-name: example;
  animation-duration: 1s;  
  animation-fill-mode: forwards;
}

@keyframes example {
  0% {}
  100% {opacity: 0; height: 0;}
}
</style>

<body>
    <p>Let the div element retain the style values set by the last keyframe when the animation ends:</p>
    <div>Div content</div>
</body>

لمعرفة الخصائص التي يمكن إستخدامها في عمل تحريك Animation، يمكنك الإطلاع على هذه الصفحة من توثيق MDN: