переход не работает ко всем элементам [дубликат]

Я подозреваю, что кто-то только начинает переходы CSS быстро обнаруживает, что они не работают, если вы одновременно модифицируете свойство display (block / none). Одна работа, о которой еще не упоминалось, заключается в том, что вы можете продолжать использовать display: block / none, чтобы скрыть / показать элемент, но установить его непрозрачность в 0, чтобы даже когда он отображается: блок, он все еще невидим. Затем, чтобы угаснуть его, добавьте еще один класс CSS, такой как «on», который устанавливает непрозрачность в 1 и определяет переход для непрозрачности. Как вы могли себе представить, вам придется использовать JavaScript, чтобы добавить этот класс «on» к элементу, но по крайней мере вы все еще используете CSS для фактического перехода.

P.S. Если вы окажетесь в ситуации, когда вам нужно сделать как отображение: блок, так и добавить класс «включено», в то же время отложить последнее, используя setTimeout. В противном случае браузер просто видит, что происходит одновременно, и отключает переход.

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

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

] Этот помощник скелета позволит вам легко подражать jQuery show / hide, но с анимациями перехода в CSS / CSS.

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

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

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

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

Вы можете сделать это с событиями перехода, так что вы так и есть, вы создаете 2 класса css для перехода, один из которых содержит анимацию другой, удерживая дисплей в состоянии none. и вы переключаете их после окончания анимации? В моем случае я могу отображать div снова, если я нажимаю btn и удаляю оба класса.

Попробуйте отрезать ниже ...

$(document).ready(function() {
  //assign transition event
  $("table").on("animationend webkitAnimationEnd", ".visibility_switch_off", function(event) {
    //we check if this is the same animation we want  
    if (event.originalEvent.animationName == "col_hide_anim") {
      //after the animation we assign this new class that basically hides the elements.    
      $(this).addClass("animation-helper-display-none");
    }

  });

  $("button").click(function(event) {

    $("table tr .hide-col").toggleClass(function() {
      //we switch the animation class in a toggle fashion...
      //and we know in that after the animation end, there is will the animation-helper-display-none extra class, that we nee to remove, when we want to show the elements again, depending on the toggle state, so we create a relation between them.
      if ($(this).is(".animation-helper-display-none")) {
        //im toggleing and there is already the above classe, then what we want it to show the elements , so we remove both classes...        
        return "visibility_switch_off animation-helper-display-none";
      } else {
        //here we just want to hide the elements, so we just add the animation class, the other will be added later be the animationend event...        
        return "visibility_switch_off";
      }

    });

  });

});

table th {
  background-color: grey;
}

table td {
  background-color: white;
  padding:5px;
}

.animation-helper-display-none {
  display: none;
}

table tr .visibility_switch_off {
  animation-fill-mode: forwards;
  animation-name: col_hide_anim;
  animation-duration: 1s;
}

@-webkit-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-moz-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-o-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes col_hide_anim {
  0%   {opacity: 1;}
  100% {opacity: 0;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <theader>
    <tr>
      <th>Name</th>
      <th class='hide-col'>Age</th>
      <th>Country</th>
    </tr>
  </theader>
  <tbody>
    <tr>
      <td>Name</td>
      <td class='hide-col'>Age</td>
      <td>Country</td>
    </tr>
  </tbody>
</table>

<button>Switch - Hide Age column with fadeout animation and display none after</button>

Не требуется javascript, и не требуется чрезмерно огромная максимальная высота. Вместо этого установите максимальную высоту в своих текстовых элементах и ​​используйте относительную единицу шрифта, такую ​​как rem или em. Таким образом, вы можете установить максимальную высоту, большую, чем ваш контейнер, избегая при этом задержки или «выскакивания», когда меню закрывается:

HTML

<nav>
  <input type="checkbox" />
  <ul>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
  </ul>
</nav>

CSS

nav input + ul li { // notice I set max-height on li, not ul
   max-height: 0;
}

nav input:checked + ul li {
   max-height: 3rem; // a little bigger to allow for text-wrapping - but not outrageous
}

См. пример здесь: http://codepen.io/mindfullsilence/pen/DtzjE

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

I.e.:

<style>
#el {
    display: none;
    opacity: 0;
}
#el.auto-fade-in {
    opacity: 1;
    transition: all 1s ease-out; /* future, future, please come sooner! */
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
}
</style>

<div id=el>Well, well, well</div>

<script>
var el = document.getElementById('el');
el.style.display = 'block';
setTimeout(function () { el.className = 'auto-fade-in' }, 0);
</script>

Проверено в последних разумных браузерах. Очевидно, что он не должен работать в IE9 или ранее.

Измените 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.

Редактировать: в этом примере не применяется ни один символ.

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

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

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

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

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

display не является одним из свойств, с которыми работает переход.

См. http://www.w3.org/TR/css3-transitions/#animatable-properties- для списка свойств, которые могут иметь к ним переход.

Существует альтернативное решение с анимацией css для скрытого скрытого:

.dropdown{   
  position: relative;
  width: 100%;
 -webkit-animation-name: animatetop;
 -webkit-animation-duration: 0.4s;
 animation-name: animatetop;
 animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
 from {top:-300px; opacity:0} 
 to {top:0; opacity:1}
}

@keyframes animatetop {
 from {top:-300px; opacity:0}
 to {top:0; opacity:1}
}

Мой аккуратный трюк 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;
}

Он работает, пока !

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

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

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

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

jsFiddle example

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";

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

.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;
}

Вместо обратных вызовов, которые не существуют в CSS, мы можем использовать свойство transition-delay.

#selector {
    overflow: hidden; // hide the element content, while height = 0
    height: 0; opacity: 0;
    transition: height 0ms 400ms, opacity 400ms 0ms;
}
#selector.visible {
    height: 100%; opacity: 1;
    transition: height 0ms 0ms, opacity 600ms 0ms;
}

Итак, что здесь происходит?

1. Когда добавлен класс visible, обе height и opacity запускают анимацию без задержки (0 мс), хотя height принимает 0 мс для завершения анимации (эквивалент display: block), а opacity занимает 600 мс.
2. Когда класс visible удален, opacity запускает анимацию (0 мс задержка, 400 мс), а высота ждет 400 мс и только затем мгновенно восстанавливает начальное значение (эквивалент display: none в обратном вызове анимации) .

Обратите внимание, что этот подход лучше, чем при использовании visibility. В этом случае элемент все еще занимает пространство на странице, и это не всегда удобно.

Для получения дополнительных примеров обратитесь к этой статье .

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

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

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

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

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

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

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

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

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

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

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

@keyframes showNav {
  from {opacity: 0;}
  to {opacity: 1;}
}
.subnav-is-opened .main-nav__secondary-nav {
  display: block;
  animation: showNav 250ms ease-in-out both;
}

Демо

В этой демонстрации подменю изменяется с display:none на display:block и все еще удается исчезнуть.