CODEWITHSUNDEEP
csscheckbox
Hautzii
Hautzii

Reputation: 5

transition only when checking/unchecking checkbox

I'm learning how to make a site and decided to make a dark mode checkbox for it. I set a transition: 0.5s ease-in-out to make it look good but the problem is that the transition occurs everytime I change pages and it hurts the eyes. How can I make it so that the transition only happens when I check or uncheck the checkbox.

const darkBtn = document.querySelector('.fas');
const bodyEl = document.querySelector('body');

const darkMode = () => {
    bodyEl.classList.toggle('dark')
}

darkBtn.addEventListener('click', () => {
    // Get the value of the "dark" item from the local storage on every click
    setDarkMode = localStorage.getItem('dark');

    if(setDarkMode !== "on") {
        darkMode();
        // Set the value of the item to "on" when dark mode is on
        setDarkMode = localStorage.setItem('dark', 'on');
    } else {
        darkMode();
        // Set the value of the item to  "null" when dark mode if off
        setDarkMode = localStorage.setItem('dark', null);
    }
});

// Get the value of the "dark" item from the local storage
let setDarkMode = localStorage.getItem('dark');

// Check dark mode is on or off on page reload
if(setDarkMode === 'on') {
    darkMode();
}
:root {
      --body-color: #fff;
      --heading-color: #1e202a;
      --text-color: #1e202a;
}

* {
      box-sizing: border-box;
}

html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100vh;
}

body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100vh;
      font-family: Poppins;
      font-weight: 400;
      /* background: url(background-img.jpg);
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
      background-size: cover; */
      background-color: var(--body-color);
      transition: 0.5s ease-in-out;
}

nav {
      padding: 8px;
}

.logo {
      float: left;
      padding: 8px;
      margin-left: 16px;
      margin-top: 8px;
}

.logo a {
      color: #000;
      text-transform: uppercase;
      font-weight: 700;
      font-size: 18px;
      letter-spacing: 0px;
      text-decoration: none;
      color: var(--text-color);
}

nav ul {
      float: right;
}

nav ul li {
      display: inline-block;
      float: left;
}

nav ul li:not(:first-child) {
      margin-left: 48px;
}

nav ul li:last-child {
      margin-right: 24px;
}

nav ul li a {
      display: inline-block;
      outline: none;
      color: var(--text-color);
      text-transform: uppercase;
      text-decoration: none;
      font-size: 14px;
      letter-spacing: 1.2px;
      font-weight: 600;
}

@media screen and (max-width: 864px) {
      .logo {
            padding: 0;
      }

      .nav-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: var(--body-color);
            opacity: 0;
            transition: all 0.2s ease;
            color: var(--text-color);
      }

      .nav-wrapper ul {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
      }

      .nav-wrapper ul li {
            display: block;
            float: none;
            width: 100%;
            text-align: right;
            margin-bottom: 10px;
      }

      .nav-wrapper ul li:nth-child(1) a {
            transition-delay: 0s;
      }

      .nav-wrapper ul li:nth-child(2) a {
            transition-delay: 0.1s;
      }

      .nav-wrapper ul li:nth-child(3) a {
            transition-delay: 0.2s;
      }

      .nav-wrapper ul li:nth-child(4) a {
            transition-delay: 0.3s;
      }

      .nav-wrapper ul li:nth-child(5) a {
            transition-delay: 0.4s;
      }

      .nav-wrapper ul li:nth-child(6) a {
            transition-delay: 0.5s;
      }

      .nav-wrapper ul li:not(:first-child) {
            margin-left: 0;
      }

      .nav-wrapper ul li a {
            padding: 10px 24px;
            opacity: 0;
            color: var(--text-color);
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 1.2px;
            transform: translateX(-20px);
            transition: all 0.2s ease;
      }

      .nav-wrapper ul li i {
            padding-right: 35px;
      }

      .nav-btn {
            position: fixed;
            right: 10px;
            top: 10px;
            display: block;
            width: 48px;
            height: 48px;
            cursor: pointer;
            z-index: 9999;
            border-radius: 50%;
      }

      .nav-btn i {
            display: block;
            width: 20px;
            height: 2px;
            background: var(--text-color);
            border-radius: 2px;
            margin-left: 14px;
      }

      .nav-btn i:nth-child(1) {
            margin-top: 16px;
      }

      .nav-btn i:nth-child(2) {
            margin-top: 4px;
            opacity: 1;
      }

      .nav-btn i:nth-child(3) {
            margin-top: 4px;
      }
}

#nav:checked+.nav-btn {
      transform: rotate(45deg);
}

#nav:checked+.nav-btn i {
      background: var(--text-color);
      transition: transform 0.2s ease;
}

#nav:checked+.nav-btn i:nth-child(1) {
      transform: translateY(6px) rotate(180deg);
}

#nav:checked+.nav-btn i:nth-child(2) {
      opacity: 0;
}

#nav:checked+.nav-btn i:nth-child(3) {
      transform: translateY(-6px) rotate(90deg);
}

#nav:checked~.nav-wrapper {
      z-index: 9990;
      opacity: 1;
}

#nav:checked~.nav-wrapper ul li a {
      opacity: 1;
      transform: translateX(0);
}

.hidden {
      display: none;
}

.dark {
      --body-color: #1f212e;
      --heading-color: #8b97c6;
      --text-color: #fff;
}

.fas {
      cursor: pointer;
      color: var(--heading-color);
      transform: rotate(-25deg);
}

.text {
      padding-top: 20%;
      font-family: "Poppins", sans-serif;
      font-size: 15px;
      font-weight: 400;
      margin-right: 25%;
      margin-left: 25%;
      line-height: 1.8;
      letter-spacing: 0em;
      color: var(--text-color);
}

p {
      font-family: "Poppins", sans-serif;
      font-size: 15px;
      font-weight: 400;
      margin-right: 25%;
      margin-left: 25%;
      line-height: 1.8;
      letter-spacing: 0em;
      color: var(--text-color);
}

h1 {
      font-family: "Futura-pt", sans-serif;
      text-align: center;
      font-size: 40px;
      text-decoration: none;
      margin-bottom: 20px;
      margin-top: 100px;
      color: var(--text-color);
      /* color: var(--heading-color); */
}

a {
      color: var(--text-color);
      text-decoration: inherit;
      font-family: "Futura-pt", sans-serif;
      font-weight: 600;
      line-height: 1.3;
      letter-spacing: 0em;
}

iframe {
      margin-left: 30%;
      margin-top: 3%;
}

table {
      margin-left: 25%;
      font-family: "Futura-pt", sans-serif;
}

th {
      padding: 1.4em;
      color: var(--text-color);
}

td {
      color: var(--text-color);
}

.lol {
      text-align: center;
}

.skins {
      margin-left: auto;
      margin-right: auto;
}

caption {
      margin-left: auto;
      margin-right: auto;
      margin-top: 2%;
      font-family: "Futura-pt", sans-serif;
      font-weight: 600;
      color: var(--text-color);
}

.classes {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
}

.hobbit {
      font-family: "Poppins", sans-serif;
      font-size: 15px;
      font-weight: 400;
      margin-left: 290px;
      line-height: 1.8;
      letter-spacing: 0em;
      color: var(--text-color);
}

.homelinks {
      margin-left: 45%;
      line-height: 1.8;
}

.box {
      position: relative;
      float: left;
      width: 25%;
      margin-left: -5%;
}

.box2 {
      position: relative;
      float: right;
      width: 25%;
      margin-right: 30%;
}

.undervids {
      padding-top: 360px;
}

.sidemoon {
      top: 10px;
      right: 10px;
      position: absolute;
      display: none;
}

figcaption {
      font-family: "Poppins", sans-serif;
}

.imgContainer {
      float: left;
      margin-left: 50px;
      color: var(--text-color);
}

.imgContainer2 {
      float: left;
      margin-left: 20px;
      color: var(--text-color);
}

figure {
      text-align: center;
}

.lofivideos {
      text-align: center;
      padding-bottom: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Home</title>
      <link rel="stylesheet" href="master.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
</head>
<body>
      <div class="container">
            <nav>
                  <input type="checkbox" id="nav" class="hidden">
                  <label for="nav" class="nav-btn">
                        <i></i>
                        <i></i>
                        <i></i>
                  </label>
                  <div class="logo">
                        <a href="index.html">SITE</a>
                  </div>
                  <div class="nav-wrapper">
                        <ul>
                              <li><a href="index.html">Home</a></li>
                              <li><a href="Lofi.html">Lofi</a></li>
                              <li><a href="League_Of_Legends.html">LoL</a></li>
                              <!-- <li><a href="The_Hobbit.html">The Hobbit</a></li> -->
                              <li><a href="Tower_Of_God.html">ToG</a></li>
                              <li><a href="card.html">Contact</a></li>
                              <li><i class="fas fa-moon fa-2x"></i></li>
                        </ul>
                  </div>
            </nav>
      </div>
      <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime vitae fugiat, velit, numquam totam vel sequi tempora, rerum nam earum repudiandae omnis consequuntur incidunt! Quam maxime quibusdam neque corporis tempore? Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit fugiat labore accusantium commodi tempore eaque veniam excepturi nulla dicta magni, aut saepe facilis cum consequuntur est inventore itaque laudantium corrupti.</div>


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

Upvotes: 0

Views: 189

Answers (1)

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

Not sure what that mass of CSS is attempting so for this answer, I removed it as not part of the question. Rather than toggle a class, I decided to toggle a data attribute value and select by that. We could have "lightblue", "dark", "light" etc.

I used a fake local storage - but again you can work that out in your code (it does not work on StackOverflow thus why I do it differently)

Now to back to your question: simply set the value in the data attribute (on the body in this case) before/on page load. It should be great initially (it is just CSS) but then do whatever when you toggle it.

Just to be clear, I added the transition related CSS.

const darkBtn = document.querySelector('.fas');

function fakeLocalGet(itemName) {
  const iholdstuff = document.querySelector('#i-hold-stuff');
  return iholdstuff.dataset[itemName];
}

function fakeLocalSet(itemName, itemValue) {
  const iholdstuff = document.querySelector('#i-hold-stuff');
  iholdstuff.dataset[itemName] = itemValue;
}
var toggleState = function(elem, one, two) {
  var elem = document.querySelector(elem);
  elem.setAttribute('data-state', elem.getAttribute('data-state') === one ? two : one);
};

darkBtn.addEventListener('click', () => {
  let isDarkMode = (fakeLocalGet('dark') === "on");
  // console.log(isDarkMode);
  if (isDarkMode) {
    toggleState('body', 'dark', 'light');
    fakeLocalSet('dark', 'on');
  } else {
    toggleState('body', 'light', 'dark');
    fakeLocalSet('dark', 'off');
  }
});
// initially set to light (dark off)
fakeLocalSet('dark', "off");
//toggleState('body', 'dark', 'light');
let setDarkMode = fakeLocalGet('dark');
// Check dark mode is on or off on page reload
/*
if (setDarkMode === 'on') {
  darkMode();
}
*/
#i-hold-stuff {
  display: none;
}

body[data-state=dark],
body[data-state=initial] {
  background-color: #888888;
}

body[data-state=dark] {
  transition: 0.75s ease-in-out;
}

body[data-state=light] {
  background-color: #DDDDDD;
  transition: 0.75s ease-in-out;
}

.showme {
  border: solid #00ff00 1px;
  color: #FF0000:
}

.hidden {
  display: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />

<body data-state="initial">
  <div id="i-hold-stuff"></div>
  <div class="container">
    <nav>
      <input type="checkbox" id="nav" class="hidden" />
      <label for="nav" class="nav-btn">
    <i></i>
    <i></i>
    <i></i>
    </label>
      <div class="logo">
        <a href="index.html">SITE</a>
      </div>
      <div class="nav-wrapper">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="Lofi.html">Lofi</a></li>
          <li><a href="League_Of_Legends.html">LoL</a></li>
          <li><a href="Tower_Of_God.html">ToG</a></li>
          <li><a href="card.html">Contact</a></li>
          <li><i class="fas fa-moon fa-2x"></i></li>
        </ul>
      </div>
    </nav>
  </div>
  <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime vitae fugiat, velit, numquam totam vel sequi tempora, rerum nam earum repudiandae omnis consequuntur incidunt! Quam maxime quibusdam neque corporis tempore? Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Impedit fugiat labore accusantium commodi tempore eaque veniam excepturi nulla dicta magni, aut saepe facilis cum consequuntur est inventore itaque laudantium corrupti.</div>
</body>

Upvotes: 1

Related Questions