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

Question

У меня проблема с анимацией 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;
}

Этот код работает, только если я удалю изменение display.

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

Answer 1

Исходя из ответа Майклза, это фактический код 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;
    }
}

Answer 2

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

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

Answer 3

Если возможно - используйте 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;
}

Answer 4

Этот обходной путь работает:

1. определяет «ключевой кадр»:

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

2. Используйте этот «ключевой кадр» для «наведения»:

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

Answer 5

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

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

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

Answer 6

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

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

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

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

Answer 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 и ниже.

Answer 8

У меня была такая же проблема. Я попытался использовать анимацию вместо переходов - как предложили @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;
}

Answer 9

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

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

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

Вот пример 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);

Answer 10

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

display + opacity

Мой подход решает более общий вопрос, новозможно, это была фоновая проблема, которую нужно решить, используя 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 не нарушит компоновку.

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