How to hide/show the unit to work fade?

Good afternoon. There are two blocks that appear and disappear according to a certain condition.
Each unit consists of an inner svg element and pseudo-element :after.

It is necessary that their appearance / disappearance was gradual.

Here's 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 hidden by default. When they add the class is-visible. they, along with the class element icon and :after should gradually appear. And similarly, deleting a class is visible to disappear.

Again I'm only interested in the styles to give a smooth, the rest is all there.

Thanks in advance.
June 8th 19 at 17:24
1 answer
June 8th 19 at 17:26
Transition: opacity 300ms;
So?
so I did, and even separately added transition for :after. But still :after just abruptly appears. - Sadie_Padbe commented on June 8th 19 at 17:29
just in case - the transition should be hung at the button-right, button-left
If not help - post the example somewhere on codepen\jsfiddle, please - leonor36 commented on June 8th 19 at 17:32
made sample fidle... https://jsfiddle.net/2mpnL4ra/3/ realized that it turns out I had everything written correctly, and that apparently the problem is the plugin manos.malihu.gr/jquery-custom-content-scroller

visit just implemented custom horizontal scrolling, and apparently there is conflict of some kind.
As fidle everything smoothly and on my page it just delayed dramatically displayed. - Sadie_Padbe commented on June 8th 19 at 17:35
, Gatow https://jsfiddle.net/2mpnL4ra/4/
there are no conflicts, everything is fine. just not hitched there - Leda15 commented on June 8th 19 at 17:38

Find more questions by tags SassCSS