Анимация CSS3: дисплей + непрозрачность

Question

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

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

725 14

css css3 animation

14 ответов:

Comments

Ничего не найдено.

Chris · Accepted Answer · 2015-11-18 13:22:32

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

Michael Mullany · Accepted Answer · 2014-04-04 17:40:31

вы можете сделать с CSS анимацией:
0% display:none ; opacity: 0;
1% display: block ; opacity: 0;
100% display: block ; opacity: 1;

tomas.satinsky · Accepted Answer · 2014-02-17 12:26:48

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

Hermann Schwarz · Accepted Answer · 2013-10-17 13:55:06

этот метод работает:

определить "кадр":

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

Alexis Delrieu · Accepted Answer · 2011-12-10 13:12:27

Я немного изменился, но результат красивый.
.child {
    width: 0px;
    height: 0px;
    opacity: 0;
}

.parent:hover child {
    width: 150px;
    height: 300px;
    opacity: .9;
}
спасибо всем.

RafaelKr · Accepted Answer · 2015-09-09 22:14:02

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

Dave · Accepted Answer · 2015-06-01 17:09:18

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

felixhirschfeld · Accepted Answer · 2018-05-16 18:01:00

я использовал это для его достижения. Они исчезают при наведении, но не занимают места, когда скрыты, идеально!
.child {
    height: 0px;
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease-in-out;
}

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

Luca Steeb · Accepted Answer · 2015-09-09 22:07:04

на абсолютных или фиксированных элементах вы также можете использовать Z-индекс:
.item {
    position: absolute;
    z-index: -100;
}

.item:hover {
    z-index: 100;
}
другие элементы теперь должны иметь Z-индекс между -100 и 100.

daniel.sedlacek · Accepted Answer · 2017-01-13 17:26:08

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

Hannes Morgenstern · Accepted Answer · 2016-06-17 00:07:34

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

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

мой подход решает более общий вопрос, но, возможно, это была фоновая проблема, которая должна быть решена с помощью 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 элемент the .child элемент должен быть поставлен на место немедленно, а затем непрозрачность будет изменено:
transition: left 0s, visibility 0s, opacity 0.8s;
когда нет наведения или указатель мыши был перемещен с элемента, нужно подождать, пока изменение непрозрачности не закончится, прежде чем элемент можно будет переместить с экрана:
transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;
перемещение объекта будет жизнеспособной альтернативой в случае, когда параметр display:none не будет нарушать макет.

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

Joshua · Accepted Answer · 2011-12-10 07:10:43

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

изменить: сохранить состояние и не возвращаться к предыдущему состоянию наведения? Ок здесь нам нужен 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>

Nicholas · Accepted Answer · 2018-06-07 21:25:05

чтобы иметь анимацию в обоих направлениях 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;
  }
}

Madara Uchiha · Accepted Answer · 2011-12-09 20:31:10

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