transition — Управление задержкой display:none
Задать вопрос
Вопрос задан
Изменён 8 месяцев назад
Просмотрен 29k раз
Добрый день.
Есть задача: сделать задержку скрытия элемента (меню второго уровня). Как это сделать на JS — догадываюсь, но хотелось бы обойтись одним CSS.
Если вместо display использовать visibility, то все хорошо:
.menu.second {
visibility:hidden;
opacity:0;
transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}
.menu.second:hover {
visibility:visible;
opacity:1;
transition-delay:0s;
}
Но мне необходимо именно display:block и display:none.
Как это реализовать?
- transition
- css
9
Так же можно и width и height поставить 0 , задержка будет работать , на display transition не отрабатывает , либо применять js.
- Вы не сможете навести мышь на элемент который не занимает место в DOM, т.е. у которого стиль
display: none; Попробуйте через
position: absolute;. т.е. как-то так..menu.second { position: absolute; visibility:hidden; opacity:0; transition:visibility 0s linear 0.5s,opacity 0.5s linear; } .menu.second:hover { position: static; visibility:visible; opacity:1; transition-delay:0s; }Но проблема с активацией объекта (наведением мыши) остаётся.
1
Зарегистрируйтесь или войдите
Регистрация через GoogleРегистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
visibility | htmlbook.
ru| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |||
| 6.0+ | 8.0+ | 1.0+ | 4.0+ | 9.5+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | visible |
|---|---|
| Наследуется | Да |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Синтаксис
visibility: visible | hidden | collapse | inherit
Значения
- visible
- Отображает элемент как видимый.
- hidden
- Элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы.
- collapse
- Если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden. В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено display: none. Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой. Это значение не поддерживается браузером Internet Explorer.
- inherit
- Наследует значение родителя.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>visibility</title> <style> .descr { visibility: hidden; } .b:hover + .descr { visibility: visible; } </style> </head> <body> <img src="images/button.gif" alt="Кнопка"> <div> Данная эксклюзия является подмножеством астрациональных супремативных монотенных федоний кадонарного экстрафазория.</div> </body> </html>
descr { visibility: hidden; }
.b:hover + .descr {
visibility: visible;
}
</style>
</head>
<body>
<img src="images/button.gif" alt="Кнопка">
<div>
Данная эксклюзия является подмножеством астрациональных
супремативных монотенных федоний кадонарного экстрафазория.</div>
</body>
</html>Объектная модель
[window.]document.getElementById(«elementID»).style.visibility
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit и collapse.
Браузер Safari до версии 4.0 не поддерживает значение collapse.
Opera до версии 9.5 воспринимает значение collapse как hidden для всех элементов.
Форматирование
CSS по теме
- visibility
Статьи по теме
Рецепты CSS
Переход на дисплее нет — HTML и CSS — Форумы SitePoint
#1
Привет,
У меня есть простой display:none display:block который показывает и скрывает изображение при наведении :
Это работает нормально, но я хотел бы добавить плавный переход между два состояния. Это возможно?
Я добавил простой переход : все 0,3 с облегчают , но, похоже, он неприменим.
Любые идеи, как я могу это сделать?
Спасибо
Гэндальф
#2
Вы не можете анимировать отображение . Вот список свойств, которые можно анимировать.
инструментщик
#3
А, понятно.
Я пробовал с непрозрачностью и абсолютным позиционированием, но теперь возникла странная проблема с прыжком второго изображения при наведении курсора.
Арчибальд
#4
Вот мой подход к этому (с более медленным переходом для демонстрации):
3 лайков
инструментщик
#5
Отлично, спасибо!
Я думаю, что нет способа не иметь фиксированной ширины, поэтому, если бы у меня была различная ширина изображения? Если бы мои изображения различались по ширине/высоте, мне пришлось бы устанавливать ширину для каждой транзакции и применять разные классы к каждому изображению?
СамА74
#6
Для изображений обычно рекомендуется устанавливать размеры изображения в ширина и высота атрибуты самого изображения.
2 нравится
система закрыто
#8
Эта тема была автоматически закрыта через 91 день после последнего ответа. Новые ответы больше не допускаются.
【CSS】 Дисплей に Переход が 効か ない 時 対処 法 法 — Интернет デザイン コーディング を 勉強 中 の に 届け たい たい を する ブログ
ある要素にマウスホバーやクリックイベントを行い、非表示の要素を「 дисплей: нет; 」から「 отображение: блок; 」切り替える 際 、 、 Переход を し て 要素 を 徐々 に 表示 さ せ よう と と 、 、 Переход が ず 要素 が 瞬時 に 出現 し てしまい 困っ いう 経験 経験 経験 経験 経験 経験 経験 経験 経験 経験 経験 経験 経験 経験 でしょ でしょ でしょ でしょ でしょ でしょ でしょ でしょ でしょ でしょ でしょ でしょ でしょ でしょ でしょ でしょ でしょ でしょ でしょ でしょ でしょ でしょ でしょ でしょ でしょ でしょ でしょ でしょ でしょの記事では、 display に transition が効かない時の対処法について解説します。
コンテンツ
- displayにtransitonが効かない
- HTML
- CSS
- なぜdisplayにtransitonが効かないのか
- displayにtransitonが効かない時の対処法
- CSS
- visibilityとopacityの併用が必要な理由
- visibilityのみ指定した場合
- opacityのみ指定した場合
- visibilityとopacityを併用した場合
- まとめ
displayにtransitonが効かない
今回はマウスホバーイベントで考えます。
HTML
<дел>;
СС
.
содержание {
дисплей: нет; //要素を非表示。
}
.content:наведите {
дисплей: блок; //要素を表示。
переход: .3с; //アニメーションの速度を指定。
}
上記のように Дисплей を 使用 し Нет から Блок に て 非 非 表示 の 要素 を さ せる 際 、 、
実は Дис. 指定 し て 動作 し ませ ん。。
なぜ Дисплей に Транзизон が ない ない の か
見えないしクリックもできないが、そこにはあるというイメージ です。 したがって要素自体は存在 する ので 、 、 しかし 、 Переход は 「「 「「 「定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義 定義」 その その その その その その その その その その その その その その その その その その その その その その 9にする「 дисплей: нет; . transition を使用して表示非表示の変化を指定したい時は display を使用するのではなく、 visibility と opacity の２つのプロパティを併用することで、 transition を機能させることができます。 CSS
.
содержание {
видимость: скрыто;
непрозрачность: 0;
}
.content:наведите {
видимость: видимость;
непрозрачность: 1;
переход: .3s;//アニメーションの速度を指定。
}
прозрачностьとнепрозрачностьの併用が必要な理由
видимость と непрозрачность .プロパティですが、 видимость: скрыто; は дисплей: нет; のように要素の存在を完全に無効にするわけではなく、レイアウト自体は変更されません。 Переход が 適用 さ れ ます。 Видимость を 指定 し だけ で は Переход で を 徐々 に 表示 さ ことができ ん。 Показать .
.содержание {
видимость: скрыто;
}
.content:наведите {
видимость: видимость;
переход: .3s;//アニメーションの速度を指定。
} непрозрачность のみ し た 場合 場合
непрозрачность プロパティ 要素 要素 の 透明 度 を する プロパティ です。 二 の 要素 に に непрозрачность: 0; と непрозрачность: 1; を指定し、 переход を使用してイベントを発生させると要素が徐々に表示されます。
しかし、 непрозрачность: 0; で に し た 要素 は は Дисплей の に 完全 に 消える わけ ではない ので 、 要素 を クリック てしまい 非常 厄介 です 非 表示 表示 の 下 リンク リンク など ある 、 リンク 表示 コンテンツ の の に リンク が ある リンク クリック コンテンツ コンテンツ の ことができなくなります。
.
