Onclick style display none

Onclick style display none

I am trying to make it so when you click the button:

  • the button and Heading are removed;
  • the hidden content is displayed.

Then the hidden content has a back button. Once you click that it reverts all changes.

The JavaScript code below doesn’t work, but it should give you an idea of what I’m trying to achieve. I am not sure how to contact both ids/classes since I need to do both.

и так далее с шагом +1 по индексам id до 37-ого включительно

Есть 37 элементов меню:

Все 37 div’ов предварительно скрыты средствами css, конкретнее scss препроцессором циклом @for:

ЗАДАЧА: По клику на конкретный элемент меню — присваивать соответствующему div — display: block, тем самым показав его и всё его содержимое, и одновременно с этим закрывать раннее открытый из возможных 36 штук div.

мой JS:
Перепробовал много вариантов, не могу достичь результата, даже не вижу смысла перечислять что именно я пробовал, скажу только то, что все 37 div’ов я получил через:

Далее сформировал массив из этих переменных:

И теперь я в тупике.

  • Вопрос задан 22 мар. 2019
  • 376 просмотров

а в вёрстке эти генерированные классы не используете.

Скорее всего планировалось блоки прятать по идентификатору и в цикле стилей ошибка?
Но тогда почему бы не использовать единый класс "ranging" — не понятно

Возможно вам известно, что с помощью свойств transition и animation в CSS3 можно создавать анимацию для определенных CSS-свойств . Но есть свойства, не поддающиеся анимации. Одним из них является display .

Было бы очень полезно анимировать это свойство, но это невозможно, как мне казалось до недавнего времени (ну например, как анимировать нечисловое свойство display: table ?). Но есть обходной путь, который я покажу в данной статье.

Читайте также:  Itv ru официальный сайт

Зачем может понадобиться анимировать свойство «display»?

Нужда в анимации свойства display может исходить от необходимости решить следующие проблемы:

  • Нужно сделать плавное исчезновение объекта со страницы;
  • Вы не хотите, чтобы элемент занимал место после своего исчезновения (например, нужно вызвать перестройку потока вывода после исчезновения некоторого объекта);
  • Вы хотите использовать для анимации исключительно CSS, без применения сторонних библиотек.

Исходя из вышеперечисленного, изменения значения свойства opacity до нуля недостаточно, так как элемент с нулевой прозрачностью все еще будет занимать место на странице.

Давайте пошагово решим поставленную задачу.

Использование Opacity и Display

Первым делом, мы попробуем использовать оба свойства — и opacity и display . HTML-код будет таким:

CSS-код может выглядеть так:

В классе « hidden » у нас имеются значения display: none и opacity: 0 . Если мы будем подставлять данный класс с помощью jQuery, то можно использовать такой код:

Однако если мы сделаем так, то не увидим эффекта перехода, который определен в стилевом блоке .box . Получится вот что (пример в Firefox немного отличается от Chrome/IE10):

Нажмите несколько раз на кнопку « Переключение видимости » и увидите, что прямоугольник исчезает и появляется мгновенно, без перехода.

Чтобы это исправить, мы можем попробовать отделить свойство display от opacity в CSS-файле:

Теперь мы можем переключать оба класса по очереди:

Однако данный вариант не поможет нам выполнить поставленной задачи:

Нам нужно, чтобы элемент сначала плавно исчезал со страницы визуально, а затем полностью удалялся.

Даже если мы скомбинируем opacity: 0 с visibility: hidden , то несмотря на присутствие анимации, элемент по-прежнему будет занимать место на странице после исчезновения, что опять же нас не устраивает.

Читайте также:  Mini windows xp iso

Почему не работает?

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

Во-первых, если вы будете добавлять классы так, как показано в примере выше, даже при нормально работающем переходе, необходимо будет разделить секцию для удаления и замены классов (то есть, если прямоугольник начинает скрываться, то сначала нужно установить свойство display: block , а затем изменить прозрачность).

Но этот прием не работает. JavaScript выполняет строку за строкой и не ждет выполнения операций, которые запускает каждая из них. Другими словами, если вы запускаете анимацию или другое асинхронное событие в строке 1, строка 2 будет выполнена, даже если анимация еще не закончилась.

После запуска анимации свойством opacity , а ее выполнение требует определенного времени, вы не увидите процесса, потому что строка display: none выполняется тут же.

Давайте подытожим возникшие перед нами проблемы:

  • Когда элемент видим, сначала запускаем анимацию прозрачности, а затем, после её окончания, применяем строку display: none ;
  • Когда элемент невидим, сначала устанавливаем свойство display: block , а затем пока он еще невидим, но уже присутствует на странице, запускаем анимацию.

Возможное решение

Возможно, есть и другие способы решения данной проблемы, но мой способ таков.

CSS-код не менется (два класса hidden по-прежнему разделены), а вот код jQuery будет таким:

А вот пример в действии:

Вот что этот код делает, когда прямоугольник видим:

  • Добавляет класс visuallyhidden , который запускает анимацию до полного исчезновения элемента;
  • После добавления класса, добавляется обработчик с помощью jQuery -метода .one() , который ожидает возникновения события transitionend ;
  • Событие transitionend наступает, когда анимация свойства opacity закончилась, и было установлено свойство display: block .
Читайте также:  Flatout ultimate carnage ключ продукта

Так как мы не можем определить возникновение события transitionend для свойства display , то нужно использовать другой путь, когда прямоугольник невидим:

  • Сначала мы удаляем класс hidden , устанавливаем свойство display: block , пока элемент еще визуально скрыт;
  • После того, как это произошло, скрипт запускает таймер с помощью функции setTimeout() , после чего начинается анимация.

Обратите внимание, что некоторые браузеры требуют префикс для transitionend. Modernizr.prefixed() может в этом помочь.

Задержка равна 20 миллисекундам. Так как свойство display: block устанавливается мгновенно, то достаточно, чтобы элемент занял свою позицию на странице и можно запускать анимацию.

А как это сделали вы?

Как было замечено выше, возможно имеются и другие способы решения данной задачи, либо улучшения для приведенного мною решения.

Лично мне кажется, что использование функции setTimeout это оптимальный вариант. Тем более, что способ работает и, скорее всего не вызовет проблем, только если на странице не будут одновременно запускаться сотни анимаций. Но тогда это уже будет другая задача.

Данная публикация представляет собой перевод статьи « Animating from “display: block” to “display: none » , подготовленной дружной командой проекта Интернет-технологии.ру

Ссылка на основную публикацию
Adblock detector