انتقال CSS3: Fade Out Effect

عند محاولة تنفيذ تأثير التلاشي باستخدام CSS خالص، قد يكون من المربك سبب الرسوم المتحركة للشرائح لن تنجح. هذا هو السبب:

يكمن مفتاح تأثير التلاشي في نقل خاصية العتامة. لن تنتج الخاصية العلوية، المستخدمة في الرسوم المتحركة للشرائح، التأثير المطلوب.

تأثير التلاشي باستخدام انتقال CSS3

فيما يلي مثال لكيفية تحقيق تأثير التلاشي باستخدام انتقالات CSS3:

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: opacity 2s linear;
}

عندما يتم تطبيق هذه الفئة على عنصر ما، فإنها ستتلاشى تدريجيًا خلال مدة ثانيتين.

موارد إضافية:

[انتقال CSS3: تأثيرات FadeIn وfadeOut مثل التأثيرات](https://css-tricks.com/css3-transition-fadein-fadeout/)

فهم الاختلافات:

يكمن الاختلاف الرئيسي بين التلاشي ورسوم الشرائح المتحركة في الخاصية التي يتم نقلها. بالنسبة لتأثير التلاشي، فهي خاصية العتامة، بينما بالنسبة للرسوم المتحركة للشريحة، فهي عادةً خاصية موضع مثل أعلى أو يسار.

في حالة الكود المقدم، يتم تعيين الرسوم المتحركة لتحويل الخاصية العلوية ، مما سيؤدي إلى نقل العنصر خارج الشاشة بدلاً من إخفائه.