Добрый день. Есть два блока, которые отображаются и скрываются по определенному условию.
Каждый блок состоит из внутреннего 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 исчезать.
Повторюсь меня интересуют только стили для придания плавности, остальное все есть.
Заранее спасибо.
Простой
