Анимация 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;
}

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

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

Основываясь на ответе Майклса, это фактический код 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;
    }
}

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

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

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

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

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

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

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

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

Немного изменил, но результат красивый.

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

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

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

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

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

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

Если вы запускаете изменение с помощью 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);

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

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

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

Остальные элементы теперь должны иметь z-index от -100 до 100.

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

дисплей + непрозрачность

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

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

Одна вещь, которую я сделал, - это установила маржу начального состояния примерно как «margin-left: -9999px», чтобы она не отображалась на экране, а затем сбросила «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>

Чтобы иметь анимацию в обоих направлениях onHoverIn / Out, я сделал это решение. Надеюсь, это кому-то поможет

@keyframes fadeOutFromBlock {
  0% {
    position: relative;
    opacity: 1;
    transform: translateX(0);
  }

  90% {
    position: relative;
    opacity: 0;
    transform: translateX(0);
  }

  100% {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
  }
}

@keyframes fadeInFromNone {
  0% {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
  }

  1% {
    position: relative;
    opacity: 0;
    transform: translateX(0);
  }

  100% {
    position: relative;
    opacity: 1;
    transform: translateX(0);
  }
}

.drafts-content {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  animation: fadeInFromNone 1s ease-in;
  will-change: opacity, transform;

  &.hide-drafts {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
    animation: fadeOutFromBlock 0.5s ease-out;
    will-change: opacity, transform;
  }
}

КАК ВОССТАНОВИТЬ НЕПРОИЗВОДИТЕЛЬНОСТЬ С помощью CSS:
это мой код:
код CSS

.item {   
    height:200px;
    width:200px;
    background:red;
    opacity:0;
    transition: opacity 1s ease-in-out;
}

.item:hover {
    opacity: 1;
}
code {
    background: linear-gradient(to right,#fce4ed,#ffe8cc);
}

<div class="item">

</div>
<p><code> move mouse over top of this text</code></p>

или проверьте этот демонстрационный файл

function vote () {
var vote = getElementById ("yourOpinion")
if (this.workWithYou):
vote + = 1};
ржунимагу

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