Как правильно скрыть/отобразить блок, чтобы работало плавное появление?

Question

[Gregory]

Добрый день. Есть два блока, которые отображаются и скрываются по определенному условию.
Каждый блок состоит из внутреннего svg элемента и псевдоэлемента :after.

Необходимо, чтобы их появление / исчезание было плавным.

Вот пример стилей:

.horizontal-scrollbar {
  &__buttons {
    position: relative;
  }

  &__button-left {
    position: absolute;
    top: 20px;
    left: 0;
    opacity: 0;

    .icon {
      position: relative;
      fill: $blue;
      height: rem(25);
      width: rem(25);
      transform: rotate(270deg);
      cursor: pointer;
      z-index: $zi-layer-2;

      &:hover {
        transform: rotate(270deg) scale(1.2);
      }
    }

    &:after {
      position: absolute;
      top: -30px;
      left: 0;
      display: block;
      content: '';
      width: rem(100);
      height: rem(90);
      background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0.20));
      z-index: $zi-layer-1;
    }

    &.is-visible {
      opacity: 1;
    }
  }

  &__button-right {
    position: absolute;
    top: 20px;
    right: 0;
    opacity: 0;

    .icon {
      position: relative;
      fill: $blue;
      height: rem(25);
      width: rem(25);
      transform: rotate(90deg);
      cursor: pointer;
      z-index: $zi-layer-2;

      &:hover {
        transform: rotate(90deg) scale(1.2);
      }
    }

    &:after {
      position: absolute;
      top: -30px;
      right: 0;
      display: block;
      content: '';
      width: rem(100);
      height: rem(90);
      background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0.20));
      z-index: $zi-layer-1;
    }

    &.is-visible {
      opacity: 1;
    }
  }

  &__content {

  }
}

кнопки: horizontal-scrollbar__button-left и horizontal-scrollbar__button-right по умолчанию скрыты. Когда им добавляется класс is-visible. они вместе с классом icon и элементом :after должны плавно появляться. И аналогично при удалении класса is-visible исчезать.

Повторюсь меня интересуют только стили для придания плавности, остальное все есть.

Заранее спасибо.

Answer 1

[Exploding]

Transition: opacity 300ms;
Так?

Comments

[Gregory]

Exploding, так я тоже делал, и даже отдельно добавлял transition на :after. Но все равно :after просто резко появляется.

[Егор Живагин]

Gregory, на всякий случай - transition надо вешать на button-right, button-left
Если не поможет - киньте пример куда-нибудь на codepen\jsfiddle, пожалуйста

[Gregory]

Егор Живагин, сделал пример на фидле... https://jsfiddle.net/2mpnL4ra/3/ понял, что оказывается у меня все было правильно написано, и что видимо проблема в плагине manos.malihu.gr/jquery-custom-content-scroller

на странице просто реализован кастомный горизонтальный скролл, и видимо есть конфликты какие-то.
Так как на фидле все плавно а у меня на странице он просто с задержкой резко отображается.

[Exploding]

Gregory, гатоуа https://jsfiddle.net/2mpnL4ra/4/
никаких там конфликтов нет, все нормально. просто не туда прицепили