Блог

Главная - Вопросы по программированию - Плавный переход между 2 таблицами стилей в приложении Angular

Плавный переход между 2 таблицами стилей в приложении Angular

#javascript #html #css #angular

#javascript #HTML #css #angular

Вопрос:

Итак, в моем приложении есть 2 разные таблицы стилей (одна темная тема и одна светлая тема), которые я могу переключать, чтобы переключать тему. Это работает нормально, но мне было интересно, возможно ли каким-то образом создать плавную анимацию перехода, подобную этой, будь то JS или чистый CSS => gif-переход стиля

мой код для переключения стилей выглядит следующим образом:

 cssFiles = ["styles-dark.css","styles-light.css"]
toggle() {
    var theme;
    if(localStorage.getItem("theme") == "dark"){
      localStorage.setItem("theme", "light")
      theme = this.cssFiles[1]
    }else{
      localStorage.setItem("theme", "dark")
      theme = this.cssFiles[0]
    }
    
    const head = this.document.getElementsByTagName('head')[0];
    let themeLink = this.document.getElementById(
      'mycss'
    ) as HTMLLinkElement;
    if (themeLink) {
      themeLink.href = theme;
    } else {
      const style = this.document.createElement('link');
      style.id = 'mycss';
      style.rel = 'stylesheet';
      style.href = `${theme}`;

      head.appendChild(style);
    }
  }

Ответ №1:

Подход, который я могу предложить, заключается в использовании переходов CSS.

  1. Создайте базовую таблицу стилей, в которой вы определяете все стили без правил, специфичных для темы (вероятно, в основном цвета). Установите переходы CSS для свойств, которые могут быть изменены. Эта таблица стилей не должна переключаться
 /* base.css */
 body {
   transition: background-color 0.5s ease;
 }

 .card {
   transition: background-color 0.5s ease;
   width: 200px;
   height: 100px;
   padding: 10px;
   border-radius: 5px
 }

 h3 {
   transition: color 0.5s ease;
 }
  1. Создание таблиц стилей для тем:
 /* styles-light.css */
  body {
    background-color: white;
  }

  .card {
    background-color: gray;
  }

  h3 {
   color: white;
  }

/* styles-dark.css */
  body {
    background-color: black;
  }

  .card {
    background-color: lightgray;
  }

  h3 {
   color: black;
  }
  1. Переключение между темами должно происходить с определенным вами переходом

Обратите внимание, что все смягчения, тайминги перехода и цвета предназначены только для демонстрации. Вот очень простой рабочий пример:

 // Simplified example for theme stylesheet
const darkTheme = `
  body {
      background-color: black;
    }

    .card {
      background-color: lightgray;
    }

    h3 {
      color: black;
    }
  `;

  document.getElementById('darkThemeToggle').addEventListener('click', () => {
    const styleTag = document.createElement('style');
    styleTag.append(darkTheme)
    document.body.append(styleTag);
  });  
 body {
      transition: background-color 0.5s ease;
    }

    .card {
      transition: background-color 0.5s ease;
      width: 200px;
      height: 100px;
      padding: 10px;
      margin-bottom: 10px;
      border-radius: 5px
    }

    h3 {
      transition: color 0.5s ease;
    }

/* Let's assume the styles below are from the light theme stylesheet */

    body {
      background-color: white;
    }

    .card {
      background-color: gray;
    }

    h3 {
      color: white;
    }  
 <body>

  <div class="card">
    <h3>content</h3>
  </div>

  <button type="button" id="darkThemeToggle">Switch to dark theme</button>
</body>