Как сделать медленный CSS переход к непрозрачности = 1 и быстрый / немедленный переход к непрозрачности = 0? - PullRequest
2 голосов
/ 11 марта 2020
.item {
  opacity: 0;
  transition: opacity 6s;
}

Я использую JS, чтобы установить непрозрачность от 0 до 1 и наоборот.

Есть ли способ в CSS сделать переход непрозрачности 0-1 за последние 6 секунд, но с переходом 1-0 за последние 0 секунд?

Полагаю, я мог бы установить свойство перехода в JS, но есть ли способ создать такое поведение с CSS?

Ответы [ 2 ]

3 голосов
/ 11 марта 2020

Используйте свойство перехода в двух разных классах, где вы будете устанавливать разную непрозрачность.


.itemHidden {
  opacity: 0;
  transition: opacity 6s;
}

.itemShown {
  opacity: 1;
  transition: opacity 0s;
}

0 голосов
/ 11 марта 2020

Мне нравится ответ Виджая, поскольку он намного короче и слаще. Тем не менее, я думаю, что стоит посмотреть, как можно создать анимацию с ключевыми кадрами, поскольку это также упоминалось в одном из комментариев. Пример использования ключевых кадров будет выглядеть примерно так:

.item {
  animation-name: demo-animation;
  animation-duration: 6s;
}

@keyframes demo-animation
{
  25% {
    opacity: .25;
  }
  50% {
    opacity: .5;
  }
  75% {
    opacity: .75;
  }
  99.99% {
    opacity: 1;
  }
    100% {
    opacity: 0;
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...