Анимация ухода сайтбара

106
30 мая 2021, 13:30

Есть сайтбар , его выдвижение и задвижение нужно анимировать , но с помощью свойства animation получается только первое (анимация выдвижения) Нужно что бы при наведении на кнопку показывался сайтбар а при исчезновении навидения сайтбар прятался так же с анимацией. Желательно только на css.

<body>
     <div class="buttom">
         <div class="saitbar"></div>
     </div>
</body>
Answer 1

1) Можно использовать переходы (transition) вместо анимации.

2) В состоянии покоя боковой панели задавайте начальное смещение

3) При наведении на кнопку, смещение уберите. И меню плавно выедет. А когда уберете курсор, снова вернется к начальному положению

Пример:

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
.sidebar { 
    width: 200px; 
    height: 300px; 
         
    background: #ee0a2e; 
 
    transform: translateX(-100%); 
    transition: 0.5s; 
} 
button:hover + .sidebar { 
    transform: translateX(0); 
}
<button>Открыть меню</button> 
<ul class="sidebar"></ul>

READ ALSO
Реализация переключения по клику
HTML

Реализация переключения по клику

Всем привет, не могу полностью реализовать переключение по кликуНужно просто в одном диве убирать класс в другой добавлять и т

 107
Вывод Json в табличку HTML
HTML

Вывод Json в табличку HTML

Вопрос тот же, что и в заголовке, любые легкие и не легкие способы, которые есть

 109
Как уменьшить шрифт в этих дивах?
HTML

Как уменьшить шрифт в этих дивах?

шрифт категорически не хочет меняться, буду рад, если кто-то заодно сделает грид)

 123
Помогите сверстать loading circle
HTML

Помогите сверстать loading circle

Помогите сверстать такое: loading circle - ссылка на изображение

 109