0

Чтобы понять, я приведу код-пример:

<header>
  <section class="intro">
    <article>
      <!-- Описание -->
    </article>
  </section>
  <menu>
    <ul>
      <li><a>Сюда нажимать, чтобы показать скрытый контент</a></li>
      <li><a>Сюда нажимать, чтобы показать скрытый контент</a></li>
      <li><a>Сюда нажимать, чтобы показать скрытый контент</a></li>
      <li><a>Сюда нажимать, чтобы показать скрытый контент</a></li>
    </ul>
  </menu>
</header>

<main>
  <section class="content-section is-hidden">
    <!-- Скрытый контент -->
  </section>
</main>

Писать JS нет смысла, потому что все просто: 4 кнопки = 4 секции с контентом (код сильно упрощен выше). По нажатию кнопки , в class="intro" добавляется is-hidden-intro. Он сразу же исчезает получая определенные стили для красоты. А class="content-section" красиво появляется через transition-delay: .375s; т.е через 375мс. Вопрос: как мне правильно изменить transition-delay, что бы когда class="content-section" был показан, по клику он сразу же исчезал, а class="intro" появлялся через 375мс? Как мне изменить "обратный путь" transition-delay для class="content-section"?

3
  • Я так понимаю вы навешиваете класс с анимацией, вот его и навешивайте то на один объект то на второй. В самом классе пишите delay. Естественно если этого класса нет, блок скроется. Commented 23 февр. 2019 в 21:19
  • transition вешаю. Интересный вариант, сейчас попробую Commented 23 февр. 2019 в 21:25
  • @ruslansemenov как часы работает. с праздником. спасибо Commented 23 февр. 2019 в 21:48

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Посмотрите другие вопросы с метками или задайте свой вопрос.