Пусть наложение div станет видимым через переход/анимацию круга клип-пути
У меня есть два <div>, которые занимают всю страницу. Первый элемент div (синий) отображается изначально, а второй (желтый) скрыт (display:none). Если я нажму на синий div, я хочу показать желтый наложенный div. Затем, если я нажму на желтый элемент div, я хочу, чтобы он исчез.
Пока это работает, если я просто переключаюсь между display:block и display:none с помощью jQuery. Затем я могу переключаться между двумя div.
Как можно добавить эффект перехода для ситуации при переключении с display:none на display:block (и, в лучшем случае, наоборот)?
Мне бы хотелось открытия/закрытия круга!
Я не знаю, возможно ли это с помощью простого CSS, JavaScript и jQuery. Если это возможно, я думаю, это может вращаться вокруг clip-path и transition?
Если возможно, я бы хотел избежать использования тяжелой сторонней библиотеки только для этого эффекта анимации.
Пожалуйста, посмотрите мой эскиз:
Большое спасибо за ваш совет!
Вы не можете анимировать отображение, но можете анимировать круг обтравочного контура. Вы пробовали это?
Ответы 1
Вы можете анимировать свойство clip-path. Вам просто нужно обязательно использовать circle в обоих случаях (или, по крайней мере, одинаково для обоих состояний). Я использовал 75vmax в качестве окончательного размера круга, но это просто бросается в глаза. Чтобы быть на 100% уверенным, что весь экран покрыт, вам, вероятно, следует использовать расчет в зависимости от размера вашего экрана или области, которую вы хотите покрыть кругом. Вы можете легко найти математические вычисления в Интернете.
let card = document.querySelector('.card');
card.addEventListener('click', e => card.classList.toggle('card--overlay'));.card {
position: relative;
width: 100vw;
height: 100vh;
background-color: blue;
}
.card.card--overlay .overlay {
clip-path: circle(75vmax at 50% 50%);
}
.overlay {
position: absolute;
inset: 0;
background-color: yellow;
clip-path: circle(0% at 25% 75%);
transition: clip-path 1s ease;
}<div class = "card">
<div class = "overlay"></div>
</div>
Вам необходимо показать нам свой HTML и соответствующий CSS, желательно в виде исполняемого фрагмента. См. stackoverflow.com/help/minimal-reproducible-example