Анимация CSS3: отображение + непрозрачность

У меня возникла проблема с анимацией CSS3.

.child {
    opacity: 0;
    display: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    display: block;
}

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

Ответы

Ответ 1

Я немного изменился, но результат прекрасен.

.child {
    width: 0px;
    height: 0px;
    opacity: 0;
}

.parent:hover child {
    width: 150px;
    height: 300px;
    opacity: .9;
}

Спасибо всем.

Ответ 2

На основании ответа Майклса это фактический CSS-код для использования

.parent:hover .child
{
    display: block;

    -webkit-animation: fadeInFromNone 0.5s ease-out;
    -moz-animation: fadeInFromNone 0.5s ease-out;
    -o-animation: fadeInFromNone 0.5s ease-out;
    animation: fadeInFromNone 0.5s ease-out;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

Ответ 3

Вы можете делать с анимацией CSS:

0% display:none ; opacity: 0;
1% display: block ; opacity: 0;
100% display: block ; opacity: 1;

Ответ 4

Если возможно - используйте visibility вместо display

Например:

.child {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}

.parent:hover .child {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s, visibility 0.3s;
}

Ответ 5

Это обходное решение работает:

определить "ключевой кадр":

@-webkit-keyframes fadeIn { 
  0% { opacity: 0; }
  20% { opacity: 0; }
  40% { opacity: 0.3; }
  60% { opacity: 0.5; }
  80% { opacity: 0.9; }
  100% { opacity: 1; }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  20% { opacity: 0; }
  40% { opacity: 0.3; }
  60% { opacity: 0.5; }
  80% { opacity: 0.9; }
  100% { opacity: 1; }
}

Используйте этот "ключевой кадр" на "hover":

div a span { 
  display: none;
}

div a:hover span {
  display: block;

  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-name: fadeIn;
  animation-duration: 1s;
}

Ответ 6

У меня была та же проблема. Я попробовал использовать анимации вместо переходов - как это было предложено @MichaelMullany и @Chris, но он работал только в браузерах webkit, даже если я скопировал их с префиксами "-moz" и "-o".

Мне удалось обойти проблему, используя visibility вместо display. Это работает для меня, потому что мой дочерний элемент position: absolute, поэтому поток документа не затрагивается. Это может работать и для других.

Это будет выглядеть исходный код с помощью моего решения:

.child {
    position: absolute;
    opacity: 0;
    visibility: hidden;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    position: relative;
    opacity: 0.9;
    visibility: visible;
}

Ответ 7

Существует еще один хороший способ сделать это с помощью указателей-событий:

.child {
    opacity: 0;
    pointer-events: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    pointer-events: all;
}

К сожалению, это не поддерживается в IE10 и ниже.

Ответ 8

В абсолютных или фиксированных элементах вы также можете использовать z-index:

.item {
    position: absolute;
    z-index: -100;
}

.item:hover {
    z-index: 100;
}

Другие элементы теперь должны иметь z-индекс от -100 до 100.

Ответ 9

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

.child {
    height: 0px;
    opacity: 0;
    visibility: hidden:
    transition: all .5s ease-in-out;
}

.parent:hover child {
    height: auto;
    opacity: 1;
    visibility: visible:
}

Ответ 10

Одна вещь, которую я сделал, - установить начальный запас состояния как нечто вроде "margin-left: -9999px", чтобы он не отображался на экране, а затем reset "margin-left: 0" на паре государство. В этом случае сохраните "display: block". Сделал трюк для меня:)

Изменить: сохранить состояние и не вернуться к состоянию предыдущего наведения? Хорошо, нам нужно JS:

<style>
.hovered { 
    /* hover styles here */
}
</style>

<script type="text/javascript">
$('.link').hover(function() {
   var $link = $(this);
   if (!$link.hasclass('hovered')) { // check to see if the class was already given
        $(this).addClass('hovered');
   } 
});
</script>

Ответ 11

Я знаю, это не решение для вашего вопроса, потому что вы просите

отображение + непрозрачность

Мой подход решает более общий вопрос, но, возможно, это была проблема фона, которая должна быть решена с помощью display в сочетании с opacity.

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

.child {
  left: -2000px;
  opacity: 0;
  visibility: hidden;
  transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;
}

.parent:hover .child {
  left: 0;
  opacity: 1;
  visibility: visible;
  transition: left 0s, visibility 0s, opacity 0.8s;
}

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

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

transition: left 0s, visibility 0s, opacity 0.8s;

Когда нет указателя, или указатель мыши был удален с элемента, нужно подождать, пока изменение непрозрачности не закончится, прежде чем элемент будет удален с экрана:

transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;

Перенос объекта будет жизнеспособной альтернативой в случае, если установка display:none не нарушит макет.

Надеюсь, я ударил ноготь по голове на этот вопрос, хотя я не ответил на него.

Ответ 12

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

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

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

Вот пример JQuery:

    $('.child').css({"display":"block"});
    //now ask the browser what is the value of the display property
    $('.child').css("display"); //this will trigger the browser to apply the change. this costs one frame render
    //now a change to opacity will trigger the animation
    $('.child').css("opacity":100);

Ответ 13

display: не является переходным. Вероятно, вам нужно будет использовать jQuery для выполнения того, что вы хотите сделать.