Display none css transition: Transitions on the CSS display property

Leave a Comment / Css / By /

css — Способы анимации «display: none» без JS

Задать вопрос

Вопрос задан

Изменён 3 года 3 месяца назад

Просмотрен 7k раз

Сделаю минимальный пример:

input, div {
  display: none;
}

label:before {
  content: 'Показать';
}

#toggle:checked + label:before {
  content: 'Скрыть';
}

#toggle:checked ~ div {
  display: block;
}
<input type="checkbox" name="toggle" />
<label for="toggle"></label>

<div>Скрытый контент</div>

Вопрос именно про display: none, поэтому способы прозрачности и нулевой высоты взамен данного свойства не предлагать.

Анимация конечно же может содержать в себе opacity, height, width, transform и прочие стили. При помощи JS, особенно с помощью jQuery, это тоже без труда реализуется, но, вопрос именно по CSS.

Если таковых нет, поделитесь, что используете и почему? Например, при сокрытии и отображении подробной информаци или обрезки текста.

  • css
  • css3
8

«Вопрос в том, как сделать плавность появления, когда у элемента есть переключение с display: none на display: block.» Пример с display: none на display: block с методом keyframes:

input {
  display: none;
}

label:before {
  content: 'Показать';
}

#toggle:checked + label:before {
  content: 'Скрыть';
}

#toggle:checked ~ div {
  animation-name: open;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}
#toggle:not(:checked) ~ div {
  display: none;
}
@keyframes open {
  0% {
    display: block;
    opacity: 0;
    visibility: hidden;
  }
  100% {
    display: block;
    opacity: 1;
    visibility: visible;
  }
}
<input type="checkbox" name="toggle" />
<label for="toggle"></label>

<div>Скрытый контент</div>

PS: лично я использую метод toggle на JS/jQuery — добавление/удаление дополнительного класса и комбинирую его с CSS так как хочу. Если на чистом CSS, то данный пример. В остальном зависит от идеи, конкретики того, что и как нужно, метод реализации — уже второй вопрос.

10

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

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

CSS Display — W3schools

Для управления макетом HTML-элемента используется CSS Display. На веб-странице каждый элемент представляет собой прямоугольную рамку. Поведение прямоугольного блока определяется свойством CSS.

CSS Свойства отображения по умолчанию:

значение по умолчанию встроенный
унаследованный нет
поддержка анимации нет
версия css1
синтаксис javascript object.style.display=»none»

Синтаксис: 90 009 

 дисплей:значение;

Отображаемые значения CSS:

Ниже перечислены часто используемые отображаемые значения CSS:

  • display: inline;
  • дисплей: встроенный блок;
  • дисплей: блок;
  • дисплей: обкатка;
  • дисплей: нет;

Отображение CSS встроенное:

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

Ниже приведены встроенные элементы:

Пример: 

 

<голова>
<стиль>
ли {
  дисплей: встроенный;
}


<тело>

Пример:

<ул>
  
  • Apple
    • 
  
  • Банан
    • 
  
  • Вишня
    •

    Вывод:

    Объяснение:

    HTML-элемент

  • .

    Отображение встроенного блока CSS:

    В элементе встроенного блока отображения CSS мы можем установить ширину и высоту.

    Пример: 

     

<голова>
<стиль>
п {
отображение: встроенный блок;
}


<тело>

    Привет, мир!!
    

    Сегодня отличный день.

    Вывод:

    Объяснение:

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

    .

    Блок отображения CSS:

    Максимальное горизонтальное пространство или полная доступная ширина могут занимать элемент блока отображения CSS. Перед ними и после них делается разрыв строки.

    Пример: 

     

<голова>
<стиль>
охватывать {
  дисплей: блок;
}


<тело>

    Привет, мир!!
    

    Сегодня отличный день.

    Результат:

    Объяснение:

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

    .

    Запуск отображения CSS:

    При запуске отображения CSS не создается определенное поле.

    И они не поддерживаются Mozilla Firefox. Поле запуска будет таким же, как блок-бокс, если оно содержит блок-бокс. Блок ввода будет первым встроенным блоком блока, если блок следует за блоком ввода. Поле запуска будет блок-боксом, если встроенное поле следует за полем запуска.

    Пример: 

     

<голова>
<стиль>
п {
дисплей: обкатка;
}


<тело>

    Привет, мир!!
    

    Сегодня отличный день.

    Результат:

    Объяснение:

    В приведенном выше примере мы используем CSS отображать запуск в элементе HTML

    .

    Нет отображения CSS:

    Чтобы исключить элемент HTML со страницы, используется отображение CSS нет. Пробел не принимается отображением CSS none.

    Пример: 

     

<голова>
<стиль>
h2.
     
     
     скрытый {
  дисплей: нет;
}


<тело>
 
    Пример:
     
 
    Пример:
     

    Привет, мир!!

    Выход:

    Объяснение:

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

    Другие отображаемые значения CSS:

    9 0013 Используется для рендеринга элемента как гибкого контейнера на уровне блока.
    Значение свойства Использование
    flex
    inline-flex Используется для визуализации элемента как гибкого контейнера встроенного уровня.
    встроенная таблица Используется для отображения элемента в виде таблицы встроенного уровня.
    list-Item Используется для того, чтобы элемент вел себя как элемент
  • .
    • table Используется для того, чтобы элемент вел себя как элемент.......
    table-caption Используется для того, чтобы элемент вел себя как элемент
    .
    table-column-group Используется для того, чтобы элемент вел себя как элемент
    table-header-group Используется для того, чтобы элемент вел себя как элемент
    table-footer-group Используется для того, чтобы элемент вел себя как элемент
    table-row-group Используется для того, чтобы элемент вел себя как элемент
    table-cell Используется для того, чтобы элемент вел себя как элемент.
    таблица-строка Используется для того, чтобы элемент вел себя как элемент
    table-column Используется для того, чтобы элемент вел себя как элемент

    Пожалуйста, поделитесь

    Категории CSS

    Отображение при прокрутке с плавным переходом — Как сделать

    sitetreet

    #1

    У меня есть div, который отображается при прокрутке ( dmx-show="(browser1.scrollY.offset > 100)" ), но я хочу, чтобы он появлялся и исчезал, а не просто появлялся и исчезал. Я пробовал переходы на панели «Дизайн», но не думаю, что они работают с параметрами «Показать» и «Скрыть динамические атрибуты».

    Так ли это? Как я должен это делать?

    Теодор

    #2

    Показать/скрыть атрибуты добавить css отображение: нет / 9Отображение 0341: блок к элементу. Свойство display нельзя анимировать.
    Вы должны создать пользовательские классы, которые анимируют видимость вашего элемента и применять их при прокрутке вместо использования для этого показа/скрытия.

    1 Нравится

    датгуру

    #3

    У меня получилось работать с плавным появлением в div, но я не могу заставить его работать с плавным исчезновением. Это работает для меня при исчезновении, хотя и на гибком контейнере… это может помочь @sitestreet

    1 Нравится

    Теодор

    #4

    Да, потому что вы не можете анимировать дисплей: нет

    датгуру

    #5

    Вот почему тогда Просто интересно, Теодор, какой смысл в анимации ухода, не относится ли это к действию скрытия?

    Спасибо

    Теодор

    #6

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

    Это не ограничение Wappler, это то, как работает CSS. Вы не можете анимировать свойство отображения.

    1 Нравится

    sitestreet

    #7

    Я создал два класса:

     .item-show {
  непрозрачность: 1;
}
.item-скрыть {
  непрозрачность: 0;
}

    , а затем использовал динамический атрибут Class Toggle для использования того или иного класса в зависимости от значения прокрутки.

    Это лучший способ?

    Теодор

    #8

    Но вы можете использовать такие анимации, как:

     .
    Добавить комментарий 
    Ваш адрес email не будет опубликован. Обязательные поля помечены *