Good-Production/template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

сделал анимацию aside

Browse Source
This commit is contained in:
Kirill Pet
2024-10-08 21:08:03 +03:00
parent 46df883cfd
commit 284a32c6c9
3 changed files with 53 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
assets/css/gp-style-core.css
View File

@@ -801,6 +801,8 @@ button{
opacity: 0;
transition: opacity .2s ease-out;
pointer-events: none;
white-space: nowrap;
}
.modal.active{
opacity: 1;
@@ -827,6 +829,9 @@ button{
position: relative;
display: none;
filter: blur(10px);
transition: filter .2s ease-out;
}
.modal__item.active{
display: flex;
@@ -1125,3 +1130,14 @@ button{
color: var(--text-dark);
}
/* radio */
@keyframes slidein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

62
assets/js/gp-main.js
View File

@@ -1,38 +1,9 @@
'use strict';
// function toggleOpenX(button, content, blockheight) {
// let thisButton = document.querySelector(button),
// thisContent = document.querySelector(content),
// thisBlockheight = document.querySelector(blockheight);
// header
// thisButton.onclick = function () {
// let height = thisBlockheight.clientHeight;
// header
// if (!thisContent.classList .contains('open')) {
// thisContent.style.height = `${height}px`;
// thisContent.classList .add('open');
// }else{
// thisContent.style.height = null;
// thisContent.classList .remove('open');
// }
// }
// }
// header start
// toggleOpenX('#pc-menu','.header__menu-block','.header__pc-menu');
// toggleOpenX('#phone-menu','.header__menu-block','.header__phone-menu');
// header end
// lang start
// toggleOpenX('.lang__open','.lang__content','.lang__list');
// lang end
// toggle
toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true);
// toggle
// checkbox
let checkbox = document.querySelectorAll('.checkbox');
@@ -53,15 +24,20 @@ checkbox.forEach(e => {
// media
modalOpen('.button--filter', '.modal__filter');
modalOpen('.basket-open', '.modal__basket');
modalClose('.modal__close');
// media
// toggle
toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true);
// toggle
function modalOpen(buttonElement, contentElement){
let modal = document.querySelector('.modal'),
aside = document.querySelector('.modal__aside'),
elements = document.querySelectorAll(buttonElement);
elements = document.querySelectorAll(buttonElement),
device = window.screen.width;
elements.forEach(e => {
let thisContentElement = document.querySelector(contentElement);
@@ -73,7 +49,15 @@ function modalOpen(buttonElement, contentElement){
let width = thisContentElement.clientWidth;
setTimeout(() => {
if (device <= 576) {
aside.style.width = `${device}px`;
thisContentElement.style.opacity = 1;
thisContentElement.style.filter = 'blur(0px)';
}else{
aside.style.width = `${width}px`;
thisContentElement.style.opacity = 1;
thisContentElement.style.filter = 'blur(0px)';
}
}, 10);
}
})
@@ -87,15 +71,23 @@ function modalClose(buttonElement) {
elements.forEach(e => {
e.onclick = function () {
modal.classList.remove('active');
aside.style.width = 0;
aside.style.width = '0px';
asideItems.forEach(e => {
if (e.classList.contains('active')) {
e.style.filter = 'blur(10px)';
}
});
setTimeout(() => {
asideItems.forEach(e => {
if (e.classList.contains('active')) {
e.classList.remove('active');
}
})
});
modal.classList.remove('active');
}, 300);
}
})
}

14
index.html
View File

@@ -115,7 +115,7 @@
</a>
</div>
<div class="mini-profile__item">
<button class="mini-profile__button">
<button class="mini-profile__button basket-open">
<img src="assets/img/svg/mini-profile/basket.svg" alt="" class="mini-profile__icon">
</button>
</div>
@@ -490,9 +490,9 @@
</div>
</main>
<div class="modal" style="display: none;">
<div class="modal">
<aside class="modal__aside">
<div class="modal__item modal__filter" style="display: none;">
<div class="modal__item modal__filter">
<button class="modal__close">
<img src="assets/img/svg/main/black-x.svg" alt="">
</button>
@@ -500,7 +500,7 @@
<div class="modal__header">
<p class="modal__title">Фильтры</p>
<div class="modal__content">
<div class="toggle active">
<div class="toggle">
<p class="toggle__title">
ДЛЯ КОГО
</p>
@@ -525,7 +525,7 @@
</div>
</div>
</div>
<div class="toggle active">
<div class="toggle">
<p class="toggle__title">
ТИП ПРОДУКЦИИ
</p>
@@ -557,7 +557,7 @@
</div>
</div>
</div>
<div class="toggle active">
<div class="toggle">
<p class="toggle__title">
ВКУС
</p>
@@ -613,7 +613,7 @@
</div>
</div>
<div class="modal__item modal__basket" style="display: none;">
<div class="modal__item modal__basket">
<button class="modal__close">
<img src="assets/img/svg/main/black-x.svg" alt="">
</button>