css - пример - w3schools html reference




Переходы на дисплее: свойство (20)

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

Я достиг эффекта, положив оба <div> s абсолютно и установив скрытый в opacity: 0 .

Если вы даже переключите свойство display из none в block , ваш переход на другие элементы не произойдет.

Чтобы обойти это, всегда позволяйте элементу display: block , но скрыть элемент, настроив любое из этих средств:

  1. Установите height в 0 .
  2. Установите opacity 0 .
  3. Поместите элемент за пределы рамки другого элемента, который имеет overflow: hidden .

Есть, скорее всего, больше решений, но вы не можете выполнить переход, если вы переключите display: none элемент display: none . Например, вы можете попробовать попробовать что-то вроде этого:

div {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0; 
}
div.active {
    opacity: 1;
    display: block;
}

Но это не сработает. По моему опыту, я нашел это, чтобы ничего не делать.

Из-за этого вам всегда нужно держать display: block элемента display: block - но вы можете обойти его, сделав что-то вроде этого:

div {
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}

В настоящее время я разрабатываю своеобразное меню «мега-выпадающего меню» CSS - в основном обычное раскрывающееся меню только для CSS, но оно содержит разные типы контента.

На данный момент, похоже, что CSS3 Transitions не относятся к свойству «display» , т. Е. Вы не можете выполнять какой-либо переход с display: none для display: block (или любая комбинация).

Может ли кто-нибудь подумать о способе меню второго уровня из приведенного выше примера, чтобы «исчезнуть», когда кто-то нависает над одним из пунктов меню верхнего уровня?

Я знаю, что вы можете использовать переходы в свойстве visibility: но я не могу придумать, как эффективно использовать это.

Я также пробовал использовать высоту, но это просто провалилось с треском.

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

Все и любые предложения приветствуются.


Вместо использования дисплея вы можете сохранить элемент «за кадром» до тех пор, пока он вам не понадобится, затем установите его положение туда, где вы хотите, и преобразуйте его одновременно. Это вызывает целый ряд других проблем дизайна, хотя, поэтому ymmv. Вероятно, вы не захотите использовать показ дисплея, так как вы хотите, чтобы контент был доступен для чтения с экрана, которые по большей части пытаются подчиняться правилам видимости - то есть, если это не должно быть видимым глазу, он не будет отображаться как контент для агента.


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

Пример кода: - (вы можете применить его к своему меню) Demo

Добавьте в таблицу стилей следующий CSS:

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}  
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

Затем примените анимацию fadeIn к дочернему fadeIn родительского зависания: - (и, конечно, установить display: block )

.parent:hover .child {
    display: block;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

Вы можете объединить два перехода или более, и visibility - это то, что пригодится на этот раз.

div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}
<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

(Не забывайте, что префиксы поставщика для свойства transition )

Подробнее в этой статье


Изменить: отображение в этом примере не применяется.

@keyframes hide {
  0% {
    display: block;
    opacity: 1;
  }
  99% {
    display: block;
  }
  100% {
    display: none;
    opacity: 0;
  }
}

Что происходит выше, так это то, что через 99% дисплея анимации будет заблокировано, а непрозрачность исчезнет. В последний момент свойства отображения установлено равным none.

И самый важный бит - сохранить последний кадр после окончания анимации с использованием режима анимации-заполнения: вперед

.hide {
   animation: hide 1s linear;
   animation-fill-mode: forwards;
}

Вот два примера: https://jsfiddle.net/qwnz9tqg/3/


Мой аккуратный JavaScript-трюк состоит в том, чтобы разделить весь сценарий на две разные функции !

Чтобы подготовить вещи, объявляется одна глобальная переменная и определяется один обработчик событий:

  var tTimeout;
  element.addEventListener("transitionend", afterTransition, true);//firefox
  element.addEventListener("webkitTransitionEnd", afterTransition, true);//chrome

Затем, когда я скрываю элемент, я использую что-то вроде этого:

function hide(){
  element.style.opacity = 0;
}

function afterTransition(){
  element.style.display = 'none';
}

Для повторного появления элемента я делаю что-то вроде этого:

function show(){
  element.style.display = 'block';
  tTimeout = setTimeout(timeoutShow, 100);
}

function timeoutShow(){
  element.style.opacity = 1;
}

Это работает, пока!


После того как принятый ответ Гильермо был написан, переход CSS-перехода от 3 апреля 2012 года изменил поведение перехода видимости, и теперь можно решить эту проблему короче , без использования задержки перехода:

.myclass > div { 
                   transition:visibility 1s, opacity 1s; 
                   visibility:hidden;  opacity:0
               }
.myclass:hover > div 
               {   visibility:visible; opacity:1 }

Время выполнения, указанное для обоих переходов, должно быть обычно одинаковым (хотя немного более длительное время для видимости не является проблемой). Для текущей версии см. Мой блог http://www.taccgl.org/blog/css-transition-visibility.html#visibility-opacity .

Назовите заголовок вопроса «Переходы на дисплее: свойство» и в ответ на комментарии Rui Marques и josh к принятому ответу: это решение работает в тех случаях, когда это не имеет значения, если используется свойство отображения или видимости (как это возможно был случай в этом вопросе). Он не будет полностью удалять элемент как отображение: none, просто сделать его невидимым, но он все еще остается в потоке документа и влияет на положение следующих элементов. Переходы, которые полностью удаляют элемент, похожий на отображение: ни один не может быть выполнен с использованием высоты (как указано другими ответами и комментариями), максимальной высотой или краем-сверху / снизу, но также см. Как я могу перейти на высоту: 0; высота: авто; используя CSS? и мой блог http://www.taccgl.org/blog/css_transition_display.html .

В ответ на комментарий от GeorgeMillo: необходимы оба свойства и оба перехода: свойство opacity используется для создания анимации затухания и затухания и свойства видимости, чтобы элемент не реагировал на события мыши. Переходы необходимы для непрозрачности визуального эффекта и видимости, чтобы задержать скрытие до тех пор, пока исчезновение не будет завершено.


Принимая от нескольких из этих ответов и некоторых предложений в другом месте, следующее отлично работает для меню наведения (я использую это с bootstrap 3, в частности):

nav .dropdown-menu {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 500ms, opacity 300ms;
    -webkit-transition: max-height 500ms, opacity 300ms;
}
nav .dropdown:hover .dropdown-menu {
    max-height: 500px;
    opacity: 1;
    transition: max-height 0, opacity 300ms;
    -webkit-transition: max-height 0, opacity 300ms;
}

Вы также можете использовать height вместо max-height если вы укажете оба значения с height:auto не разрешено с transition s. Значение hover max-height должно быть больше, чем height меню.


Согласно W3C Working Draft 19 ноября 2013 года display не является анимационным свойством . К счастью, visibility анимативна. Вы можете JSFiddle его переход с переходом непрозрачности ( JSFiddle ):

  • HTML:

    <a href="http://example.com" id="foo">Foo</a>
    <button id="hide-button">Hide</button>
    <button id="show-button">Show</button>
    
  • CSS:

    #foo {
        transition-property: visibility, opacity;
        transition-duration: 0s, 1s;
    }
    
    #foo.hidden {
        opacity: 0;
        visibility: hidden;
        transition-property: opacity, visibility;
        transition-duration: 1s, 0s;
        transition-delay: 0s, 1s;
    }
    
  • JavaScript для тестирования:

    var foo = document.getElementById('foo');
    
    document.getElementById('hide-button').onclick = function () {
        foo.className = 'hidden';
    };
    
    document.getElementById('show-button').onclick = function () {
        foo.className = '';
    };
    

Обратите внимание: если вы просто сделаете ссылку прозрачной, не устанавливая visibility: hidden , она останется кликабельной.


Я думаю, что SalmanPK имеет самый близкий ответ, он угасает элемент в или из, со следующими анимациями CSS. Однако свойство отображения не плавно меняется, а только непрозрачность.

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

@-webkit-keyframes fadeOut {
    from { opacity: 1; }
      to { opacity: 0; }
}

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

jsFiddle

CSS

@-webkit-keyframes pushDown {
  0% {
    height: 10em;
  }
  25% {
    height: 7.5em;
  }
  50% {
    height: 5em;
  }
  75% {
    height: 2.5em;
  }
  100% {
    height: 0em;
  }
}

.push-down {
    -webkit-animation: pushDown 2s forwards linear;
}

JavaScript

var element = document.getElementById("element");

// push item down
element.className = element.className + " push-down";

Я несколько раз сталкивался с этой проблемой, и теперь просто пошел с:

.block {
  opacity: 1;
  transition: opacity 250ms ease;
}

.block--invisible {
  pointer-events: none;
  opacity: 0;
}

Добавив block--invisible все элементы не будут доступны для кликов, но все элементы за ним будут связаны с pointer-events:none них не поддерживается всеми основными браузерами (без IE <11).


Я подозреваю, что причина, по которой переходы отключены, если «отображение» изменено, связано с тем, что на самом деле делает дисплей. Это не изменяет ничего, что могло бы быть плавно анимированным.

«Display: none» и «visibility: hidden», это две совершенно разные вещи. Оба имеют эффект, делающий элемент невидимым, но с «видимостью: скрытым», он все еще отображается в макете, но просто не заметно . Скрытый элемент по-прежнему занимает пробел и по-прежнему отображается как встроенный или как блок или блок-строка или таблица, или что-либо, что элемент «display» сообщает ему, чтобы отображать как, и соответственно занимает место. Другие элементы автоматически не перемещаются, чтобы занять это пространство. Скрытый элемент просто не отображает фактические пиксели на выходе.

«Display: none», с другой стороны, фактически полностью предотвращает рендеринг элемента. Он не занимает места макета. Другие элементы, которые заняли бы какое-то или все пространство, занимаемое этим элементом, теперь приспосабливаются, чтобы занять это пространство, как будто элемент просто не существовал вообще .

«Display» - это не просто еще один визуальный атрибут. Он устанавливает весь режим рендеринга элемента, например, будь то блок, встроенный, встроенный блок, таблица, таблица-строка, таблица-ячейка, список-элемент или что-то еще! У каждого из них очень разные разметки разметки, и не было бы разумного способа оживить или плавно перевести их (попробуйте представить себе плавный переход от «блока» к «встроенному» или наоборот, например!).

Вот почему переходы отключены, если отображение изменяется (даже если изменение имеет значение «none» или «нет» - «none» - это не просто invisiblity, это его собственный режим рендеринга элементов, что означает отсутствие рендеринга вообще!),


Я почти не отвечаю на вопрос с множеством ответов, но это решение имеет отличную совместимость, и я еще не видел его:

.hidden-element {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity .5s ease-out;
}

.hidden-element.visible {
  position: static;
  z-index: auto;
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

Объяснение : он использует visibility: hidden трюк (который совместим с «show-and-animate» за один шаг), но использует position: absolute; z-index: -1; pointer-events: none; комбинации position: absolute; z-index: -1; pointer-events: none; position: absolute; z-index: -1; pointer-events: none; чтобы убедиться, что скрытый контейнер не занимает места и не отвечает на взаимодействие пользователя .


Я столкнулся с этим сегодня, с position: fixed модальный, который я использовал повторно. Я не мог его display: none а затем анимировать его, поскольку он просто вскочил на внешний вид, а z-index (отрицательные значения и т. Д.) Также сделал странные вещи.

Я также использовал height: 0 до height: 100% , но она работала только тогда, когда появился модальный. Это то же самое, что если вы использовали left: -100% или что-то в этом роде.

Затем мне показалось, что был простой ответ. И вуаля:

Во-первых, ваш скрытый модальный. Обратите внимание, что height равна 0 , и проверьте декларацию height в переходах ... она имеет 500ms , что больше, чем мой переход opacity . Помните, что это влияет на переход к постепенному исчезновению: возврат модального состояния по умолчанию.

#modal-overlay {
    background: #999;
    background: rgba(33,33,33,.2);
    display: block;
    overflow: hidden;
    height: 0;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    -webkit-transition: height 0s 500ms, opacity 300ms ease-in-out;
       -moz-transition: height 0s 500ms, opacity 300ms ease-in-out;
            -ms-transition: height 0s 500ms, opacity 300ms ease-in-out;
         -o-transition: height 0s 500ms, opacity 300ms ease-in-out;
        transition: height 0s 500ms, opacity 300ms ease-in-out;
}

Во-вторых, ваш видимый модальный. Скажем, вы устанавливаете .modal-active для body . Теперь height 100% , и мой переход также изменился. Я хочу, чтобы height была мгновенно изменена, а opacity - 300ms .

.modal-active #modal-overlay {
    height: 100%;
    opacity: 1;
    z-index: 90000;
    -webkit-transition: height 0s, opacity 300ms ease-in-out;
       -moz-transition: height 0s, opacity 300ms ease-in-out;
        -ms-transition: height 0s, opacity 300ms ease-in-out;
         -o-transition: height 0s, opacity 300ms ease-in-out;
            transition: height 0s, opacity 300ms ease-in-out;
}

Вот и все, это работает как шарм.



overflow:hidden до overflow:visible . Он работает лучше. Я использую вот так:

#menu ul li ul {
    background-color:#fe1c1c;
    width:85px;
    height:0px;
    opacity:0;
    box-shadow:1px 3px 10px #000000;
    border-radius:3px;
    z-index:1;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.6s ease;
}

#menu ul li:hover ul  {
    overflow:visible;
    opacity:1;
    height:140px;
}

visible лучше, потому что overflow:hidden действуют точно так же, как display:none .


вы также можете использовать это:

.dropdown {
height: 0px;
width: 0px;
opacity: .0;
color: white;
}
.dropdown:hover {
height: 20px;
width: 50px;
opacity: 1;
transition: opacity 200ms;
/* Safari */
-webkit-transition: opacity 200ms;
}

Вы можете заставить это работать естественным образом, как вы ожидали, - используя дисплей, - но вам нужно активировать браузер, чтобы заставить его работать, используя либо JS, либо как другие предложили фантастический трюк с одним тегом внутри другого. Мне не нужен внутренний тег, поскольку он еще более усложняет CSS и размеры, поэтому вот решение JS:

https://jsfiddle.net/b9chris/hweyecu4/1/

Начиная с окна:

<div class="box hidden">Lorem</div>

Спрятанный ящик. Вы можете переключиться на клик с помощью:

function toggleTransition() {
  var el = $("div.box1");

  if (el.length) {
    el[0].className = "box";
    el.stop().css({maxWidth: 10000}).animate({maxWidth: 10001}, 2000, function() {    
        el[0].className = "box hidden";
    });
  } else {
    el = $("div.box");
    el[0].className = "box";
    el.stop().css({maxWidth: 10001}).animate({maxWidth: 10000}, 50, function() {    
        el[0].className = "box box1";
    });
  }

  return el;
}

someTag.click(toggleTransition);

CSS - это то, что вы догадались:

.hidden {
  display: none;
}
.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 20px;
    top: 20px;
    position: absolute;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transform: scale(.2);
    transform: scale(.2);
  -webkit-transition: transform 2s;
  transition: transform 2s;
}
.box1{
    -webkit-transform: scale(1);
    transform: scale(1);
}

Ключ регулирует свойство отображения. Удалив скрытый класс, а затем ожидая 50 мс, затем, начиная переход через добавленный класс, мы получим его, чтобы он появился, а затем расширяем, как мы и хотели, вместо того, чтобы просто переключаться на экран без какой-либо анимации. Аналогично происходит другой путь, за исключением того, что мы ожидаем завершения анимации перед применением скрытых.

Примечание. Я злоупотребляю .animate(maxWidth)здесь, чтобы избежать setTimeoutусловий гонки. setTimeoutбыстро вводит скрытые ошибки, когда вы или кто-то другой захватывает код, не подозревая об этом. .animate()можно легко убить .stop(). Я просто использую его, чтобы установить задержку 50 мс или 2000 мс в стандартной очереди fx, где ее легко найти / разрешить другими строителями кодов поверх этого.


Он может обрабатываться с использованием функций синхронизации времени step-endиstep-start

Например: https://jsfiddle.net/y72h8Lky/

$(".run").on("click", function() {
    $(".popup").addClass("show");
});
$(".popup").on("click", function() {
    $(".popup").removeClass("show");
})
.popup {
    opacity: 0;
    display: block;
    position: absolute;
    top: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1450;
    background-color: rgba(0, 175, 236, 0.6);
    transition: opacity 0.3s ease-out, top 0.3s step-end;
}
.popup.show {
    transition: opacity 0.3s ease-out, top 0.3s step-start;
    opacity: 1;
    top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup"></div>
<button class="run" style="font-size: 24px;">Click on me</button>


Я начал проект скелетного кода с открытым исходным кодом под названием Toggle Display Animate

https://marcnewton.github.io/Toggle-Display-Animate/

Этот помощник скелета позволит вам легко имитировать jQuery show / hide, но с анимацией перехода в CSS3 / out.

Он использует класс toggles, поэтому вы можете использовать любые методы css, которые вы хотите использовать для элементов, кроме отображения: none | block | table | inline и т. Д., А также другие альтернативные варианты использования, которые можно придумать.

Его основная цель дизайна - для состояний переключения элементов, она поддерживает состояние возврата, где скрытие объекта позволяет вам запускать ваш ключевой кадр в обратном направлении или воспроизводить альтернативную анимацию для скрытия элемента.

Большая часть разметки для концепции, над которой я работаю, это CSS, на самом деле используется очень мало javascript.

Здесь есть демо: http://marcnewton.co.uk/projects/toggle-display-animate/





css-transitions