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

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

82 голосов
/ 09 декабря 2011

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

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

Ответы [ 15 ]

2 голосов
/ 09 сентября 2015

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

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

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

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

1 голос
/ 06 марта 2019

КАК АНИМИЗИРОВАТЬ OPACITY С 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 voice () {var voice = getElementById ("yourOpinion")если (this.workWithYou):голос + = 1};лол

1 голос
/ 23 марта 2018

Чтобы анимация была в обоих направлениях при HoverIn / 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;
  }
}
0 голосов
/ 09 декабря 2011

Одна вещь, которую я сделал, - установил поле начального состояния как «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>
0 голосов
/ 09 декабря 2011

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

Страница:
...