انتقالات CSS

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

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

HTML:

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

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

.box {
  width: 100px;
  height: 100px;
  background-color: teal;
  transition: opacity 0.5s ease; /* for class toggle */
  opacity: 1;
}

.hidden {
  opacity: 0;
}

عند النقر على button - يتلاشى box:

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

button.addEventListener("click", function () {
  // opacity fades
  box.classList.toggle("hidden");
});

التحدي

سهل

أنشئ زر toggle يعرض/يخفي مربعًا عند النقر عليه.

الخطوات:

أنشئ متغيرين لتخزين:
- عنصر زر toggle
- عنصر مربع التلاشي
  استخدم document.getElementById() لكليهما
أضف مستمع حدث للنقر إلى زر toggle
عند النقر على الزر، بدّل الفئة "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>