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


101

У мене проблема з анімацією 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.

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


2
Якщо CSS не працює, як пропонують інші, ось дуже простий код Javascript для вицвітання.
Abhranil Das

Відповіді:


118

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

1
для підтримки всіх браузерів ..?
david_adler

CSS3 не підтримується у всіх браузерах. Якщо ви хочете продовжити, просто додайте правильні префікси
Кріс

17
Що можна сказати про наведення курсора, як реалізувати fadeOutToNone?
Зелений

4
Оскільки ви можете використовувати частки відсотка, краще застосовувати щось на зразок 0,001%, а не 1%, оскільки це мінімізує затримку до "старту", що може стати очевидним при більшій тривалості анімації
Зак Сосьє

1
Директива -o-keyframes насправді марна, оскільки перша версія Opera для підтримки анімації вже базувалася на webkit.
Rico Ocepek

43

Ви можете робити з анімацією CSS:

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

Хороша ідея, мені вдалося зберегти відображення мого елемента під час наведення в режимі анімації-заповнення, але тоді, коли я наводя мишу, елемент зникає.
Alexis Delrieu,

2
Ви можете використовувати режим заповнення: вперед, щоб зберегти зміни після закінчення анімації.
Michael Mullany

42

Якщо можливо - використовуйте 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;
}

24
Проблема з властивістю видимості полягає в тому, що це не приховує елемент, а лише робить його невидимим. Тож це все одно займе простір.
Самуель

6
Не тільки невидимі, але й прозорі для подій (клацання тощо). Не змінювати відображення означає не переробляти документ, що добре. Більшість елементів, які повинні зникати / виходити через непрозорість, мабуть, мали б мати фіксоване або абсолютне положення.
Расмус Кадж

13

Цей обхідний спосіб працює:

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

9

Я використав це для досягнення цього. Вони зникають при наведенні, але не займають місця, коли приховані, ідеально!

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

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

6

Я трохи змінився, але результат чудовий.

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

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

Дякую всім.


4
Це не дуже добре грає з читачами з екрану: вони будуть продовжувати читати вміст.
ehdv

1
Ви можете додати visibility: hidden;.child / visibility:visible;до наведення, і це має вирішити проблему зчитувача з екрана
csilk

6

Існує ще один хороший метод, щоб зробити це за допомогою покажчика-подій:

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


4

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

Якщо ви наведете курсор назад на дитину, поки вона анімує з поля зору, вона повернеться назад, оскільки елемент просто прихований. Досить прикро, якщо ви рухаєтеся мишею по місцю.
adamj

4

Якщо ви ініціюєте зміни за допомогою 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);

2
Це запитання не позначене ні JavaScript, ні jQuery
j08691

Я знаю, я написав це, щоб пояснити причину цього. Мені було дуже корисно, коли я дізнався про це, і я сподіваюся, це допоможе і іншим.
daniel.sedlacek

1
До речі, значення непрозорості становлять від 0 до 1
Amr

2

Для абсолютних або фіксованих елементів ви також можете використовувати z-index:

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

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

Інші елементи повинні мати z-індекс від -100 до 100 зараз.


На жаль, це закручує на type=passwordполях символ індикатора пароля KeePass . Його не видно.
philk

1
Чи можемо ми припинити використовувати довільні числа z-індексу? Тут: z-індекс: 1; проти z-index: -1 буде добре. Вибір величезних цифр z-індексу робить речі некерованими.
dudewad

2

Я знаю, це насправді не є рішенням для вашого питання, тому що ви просите

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

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

Сподіваюся, я вдарив цвях у голову за це запитання, хоча і не відповів на нього.


Цей фільтр Microsoft застарілий з IE9. Якась конкретна причина, за якою ви хочете додати її до відповідей у ​​2016 році?
TylerH

@TylerH Скільки користувачів бажає охопити - це питання смаку.
Ганнес Моргенштерн,

Враховуючи, що він застарілий , а IE <11 більше не підтримується корпорацією Майкрософт, використання цього властивості в кращому випадку викликає сумнівний смак.
TylerH

@TylerH Звичайно доводиться приймати клієнтів, які не хочуть або не можуть перейти на новіший браузер. У мене є добре відомий банк як клієнт, який все ще використовує IE6 і відмовляється від оновлення з "причин".
Маркус Каннінгем,

@MarcusCunningham Питання позначено тегом css3, що повністю виключає використання IE6 (та IE7 та IE8). Як можна раніше в браузері OP міг писати код, фільтр MS у цій відповіді застарів. А для майбутніх читачів це ще більше марно, оскільки навіть не підтримується. Там немає НЕ аргумент для включення його у відповідь на це питання. Однак це спірне питання, оскільки Ганнес вже вилучив це зі своєї відповіді.
TylerH

1

Одне, що я зробив, встановив для поля початкового стану щось на зразок "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>

Хороша ідея, але тоді, коли я
наводя мишкою

Алексіс, чи не цим ти хочеш займатися? Наведення вказівника означає ТІЛЬКИ при наведенні миші. Поясніть, будь ласка, що ви намагаєтесь досягти.
Джошуа

Так, вибачте. Я хочу зберегти зникнення в миші.
Alexis Delrieu

Це все змінює. Майже. В основному те, що ви хочете, - це функція JS, яка виявляє стан наведення, як вказували інші користувачі, і додає ... ну ... див. Мою оновлену відповідь.
Джошуа

1

Щоб мати анімацію в обох напрямках 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;
  }
}

0

ЯК АНІМУВАТИ МОЖЛИВІСТЬ З 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>

або перевірте цей демонстраційний файл

функція vote () {
var vote = getElementById ("yourOpinion")
if (this.workWithYou):
vote + = 1};
Лол


1
Не відповідає на запитання, оскільки displayмайно було просто вилучене.
Тост

-4

display:не є транзиторним. Ймовірно, вам доведеться використовувати jQuery, щоб робити те, що ви хочете зробити.


3
Ти повинен перестати захищати jQuery скрізь, чувак.
Бенджамін Груенбаум,

1
@BenjaminGruenbaum jQuery - дивовижна людина. Це чудово і робить все.
Привид
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.