انتقالات CSS

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

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

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; /* عند تبديل الفئة */
  opacity: 1;
}

.hidden {
  opacity: 0;
}

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

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

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

التحدي

سهل

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

الخطوات:

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