انتقالات CSS

جزء من قسم JavaScript in Action في رحلة HTML على Coddy — الدرس 18 من 27.

أحياناً نريد إنشاء رسوم متحركة سلسة (مثل التلاشي، أو الانزلاق، أو تغيير الحجم) عندما يظهر عنصر ما أو يختفي.
نحن نستخدم انتقالات CSS (CSS transitions) لذلك (مغطاة في قسم إتقان CSS). في JavaScript، نقوم ببساطة بإضافة أو إزالة فئة (class) - أو تعديل خصائص النمط (style properties).

HTML:

<button id="toggleBtn">Toggle Box</button>
<div id="box" class="box"></div>

يحتوي .box على انتقال (transition) في درجة الشفافية (opacity) الخاصة به، لذا عند إضافة الفئة .hidden (التي تضبط الشفافية على 0)، يتلاشى الصندوق بدلاً من الاختفاء فوراً.

.box {
  width: 100px;
  height: 100px;
  background-color: teal;
  transition: opacity 0.5s ease; /* لتبديل الفئة */
  opacity: 1;
}

.hidden {
  opacity: 0;
}

عند النقر على الزر - يتلاشى المربع:

const button = document.getElementById("toggleBtn");
const box = document.getElementById("box");

button.addEventListener("click", function () {
  // تتلاشى الشفافية
  box.classList.toggle("hidden");
});

التحدي

سهل

أنشئ زر تبديل يظهر/يخفي صندوقاً عند النقر عليه.

الخطوات:

أنشئ متغيرين لتخزين:
- عنصر زر التبديل
- عنصر صندوق التلاشي (fade box)
  استخدم document.getElementById() لكليهما
أضف مستمع حدث النقر (click event listener) إلى زر التبديل
عند النقر على الزر، قم بتبديل الفئة "hidden" على عنصر صندوق التلاشي

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
  <title>Fade Toggle Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Smooth Fade Example</h1>
    <p>Click the button below to toggle the fading box.</p>
    <button id="toggleBtn">Toggle Box</button>

    <div id="fadeBox" class="box">
      <p>This box fades in and out smoothly!</p>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>