מעברי 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>