How to hide/show the block correctly so that smooth appearance works?

Question

css

Good afternoon. There are two blocks that are displayed and hidden according to a certain condition.
Each block consists of an inner svg element and an :after pseudo-element.
It is necessary that their appearance / disappearance be smooth.
Here is an example of styles:

.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 {

  }
}

buttons: horizontal-scrollbar__button-left and horizontal-scrollbar__button-right are hidden by default. When the is-visible class is added to them. they, along with the icon class and the :after element, should fade in. And similarly, when the class is removed, is-visible will disappear.
Again, I'm only interested in styles to give smoothness, everything else is there.
Thanks in advance.

Answer 1

Transition: opacity 300ms;
So?