CSS 애니메이션은 간단하고 사용하기 쉽지만 복잡한 장면은 매우 어렵습니다. 예를 들어, 마우스가 호버링 될 때 버튼의 배경색을 변경합니까? 단순한. 그러나 고성능 방식으로 요소의 위치와 크기를 애니메이션하고 다른 요소의 위치에 영향을 미칩니 까? 힘든! 이 기사는이 문제를 깊이 탐색 할 것입니다.
일반적인 예는 많은 항목에서 품목을 제거하는 것 입니다. 상단에 쌓인 품목은 스택 하단에서 제거 된 품목의 간격을 보충하기 위해 아래쪽으로 이동해야합니다. 이것이 실제 생활에서 작동하는 방식이며, 사용자는 웹 사이트에서 이러한 현실적인 움직임을 기대할 수 있습니다. 그렇지 않다면 사용자는 혼란스러워하거나 일시적으로 길을 잃을 수 있습니다. 삶의 경험을 바탕으로, 특정한 방식으로 무언가가 작동하고 완전히 다른 결과를 얻을 것으로 기대하며, 사용자는이 비현실적인 움직임을 다루기 위해 추가 시간이 필요할 수 있습니다.
다음은 항목을 추가하거나 (버튼을 클릭) 또는 항목을 제거하기위한 UI (프로젝트 클릭)입니다.
"페이드 아웃"애니메이션 등을 추가하여 잘못된 UI를 약간 가릴 수 있지만 목록이 갑자기 붕괴되어 동일한인지 문제를 일으키기 때문에 결과는 좋지 않습니다.
동적 DOM 이벤트에 CSS 전용 애니메이션을 적용하는 것은 (새로운 요소 추가 및 요소를 완전히 제거) 매우 까다 롭습니다 . 우리는이 문제에 직접 직면 하고이 문제를 다루기 위해 세 가지 고유 한 애니메이션 유형을 소개 할 것입니다.이 문제는 모두 사용자가 프로젝트 목록의 변경 사항을 이해하도록 돕는 목표를 달성합니다. 이 기사를 작성한 후에는 이러한 애니메이션을 사용하거나 이러한 개념을 기반으로 고유 한 애니메이션을 구축 할 수 있습니다.
또한 접근성과 세분화 된 HTML 레이아웃을 만드는 방법은 여전히 ARIA 속성과 보조 장치와의 호환성을 유지하는 방법을 간단히 다룰 것입니다.
매우 현대적인 접근 방식 (그리고 개인적으로 가장 좋아하는)은 결국 어디에 도착할 것인지에 따라 수직으로 사라지는 것입니다. 이것은 또한 목록이 공간을 만들기 위해 위치 (애니메이션) 포지션 (애니메이션)이어야 함을 의미합니다. 요소가 목록을 떠나면 차를 차지하는 공간이 수축해야합니다.
우리는 동시에 다양한 작업을 수행하므로 각 .list-item 적절하게 이름이 지정된 .list-container 컨테이너 클래스로 랩핑하기 위해 DOM 구조를 변경해야합니다. 이것은 우리의 애니메이션을 만드는 데 절대적으로 중요합니다.
이 스타일은 정통입니다. 애니메이션 효과가 나중에 작동하기 위해서는 목록을 매우 구체적인 방식으로 스타일링해야하며, 이는 일부 관용적 CSS 관행을 희생하여 수행됩니다.
.목록 {
목록 스타일 : 없음;
}
.list-container {
커서 : 포인터;
글꼴 크기 : 3.5REM;
높이 : 0;
목록 스타일 : 없음;
위치 : 상대;
텍스트 정렬 : 센터;
너비 : 300px;
}
.List-Container : NOT (: First-Child) {
마진-탑 : 10px;
}
.list-container .list-item {
배경색 : #d3d3d3;
왼쪽 : 0;
패딩 : 2REM 0;
위치 : 절대;
상단 : 0;
전환 : 모든 0.6 초의 용이성;
너비 : 100%;
}
.add-btn {
배경색 : 투명;
국경 : 1px 솔리드 블랙;
커서 : 포인터;
글꼴 크기 : 2.5REM;
마진-탑 : 10px;
패딩 : 2REM 0;
텍스트 정렬 : 센터;
너비 : 300px;
} 먼저 margin-top 사용하여 스택의 요소 사이에 수직 공간을 만듭니다. 하단에는 마진이 없으므로 다른 목록 항목이 제거 된 목록 항목으로 생성 된 간격을 채울 수 있습니다. 이런 식으로 컨테이너 높이를 0으로 설정하더라도 여전히 바닥에 여백이 있습니다. 추가 공간은 삭제 된 목록 항목 바로 아래 목록 항목 사이에 생성됩니다. 삭제 된 목록 항목의 컨테이너 높이에 응답하여 동일한 목록 항목이 위쪽으로 이동해야합니다. 그리고이 여분의 공간은 목록 항목 사이의 수직 간격을 더 확장하기 때문에 margin-top 사용하여이를 발생하지 않도록합니다.
그러나 문제의 프로젝트 컨테이너가 목록의 첫 번째 항목이 아닌 경우에만이 작업을 수행합니다. 그렇기 때문에 우리가 사용하는 이유는 :not(:first-child) 같습니다 . 첫 번째 목록 항목이 목록의 상단 가장자리에서 아래로 밀기를 원하지 않기 때문에이 작업을 수행합니다. 우리는 다른 목록 항목 바로 아래에 있고 첫 번째 목록 항목은 그렇지 않기 때문에 그 후 모든 항목에서 이런 일이 발생하기를 원합니다.
이제 우리는 현재 요소의 높이를 0으로 설정하지 않기 때문에 완전히 의미가 없습니다. 그러나 우리는 나중에 목록 요소들 사이의 수직 간격을 올바르게하기 위해서는 우리와 마찬가지로 마진을 설정해야합니다.
지적할만한 또 다른 것은 .list-item 요소가 부모 .list-container .list-container 에 중첩되어 있다는 사실은 absolute 위치를 갖도록 설정되어있어 상대 위치에 비해 DOM 외부에 위치한다는 것을 의미합니다. 이 작업을 수행하여 제거 할 때 .list-item 요소가 위쪽으로 떠 다니는 동안 다른 .list-item 요소를 움직이고이 .list-item 요소를 제거하여 남은 간격을 채우는 동안. 이런 일이 발생하면 .list-container 요소 (DOM의 영향을받지 않음)는 높이가 무너져 다른 .list-container 요소가 위치를 채우는 반면 .list-item 요소 (절대적으로 위치)는 위쪽으로 떠 다니지 만 DOM의 영향을받지 않기 때문에 목록의 구조에 영향을 미치지 않습니다.
불행히도, 우리는 개별 목록 항목이 하나씩 쌓이는 적절한 목록을 얻기에 충분하지 않았습니다. 대신, 우리가 지금 볼 수있는 것은 .list-item 이며, 이는 같은 위치에 쌓인 모든 목록 항목을 나타냅니다. .list-item 요소가 padding 속성을 통해 특정 높이를 가질 수 있지만 부모 요소는 0이지만 높이가되기 때문입니다. 이것은 DOM에 이러한 요소를 실제로 서로 분리하는 것이 없다는 것을 의미합니다.이를 수행하기 위해서는 아동 요소와 달리 DOM의 영향을 받기 때문에 특정 높이를 갖기 위해서는 .list-container 요소가 필요하기 때문입니다.
목록 컨테이너가 자식 요소의 높이와 정확히 일치하려면 JavaScript를 사용해야합니다. 따라서 모든 목록 항목을 하나의 변수로 저장합니다. 그런 다음 스크립트가로드 된 직후에 호출되는 함수를 만듭니다.
이것은 목록 컨테이너 요소의 높이를 처리하는 함수가됩니다.
const listitems = document.querySelectorall ( '. list-item');
함수 계산 heightoflistContainer () {
};
계산 heightoflistContainer (); 우리가하는 첫 번째 일은 목록에서 첫 .list-item 요소를 추출하는 것입니다. 우리는 그것들이 모두 같은 크기이기 때문에 이것을 할 수 있으므로 어떤 요소를 사용하는지는 중요하지 않습니다. 일단 액세스하면 요소의 clientHeight 속성을 통해 높이를 픽셀로 저장합니다. 그 후, 우리는 새로운 것을 만듭니다