CSS 애니메이션 및 jQuery로 필터링 구성 요소 구축

몇 달 전, 나는 필터링 및 정렬을위한 인기있는 jQuery 플러그인 인 Mixitup에 관한 기사를 썼습니다. 오늘 기사에서는 jQuery 및 CSS 애니메이션으로 자신만의 간단한 여과 가능한 구성 요소를 구축하는 방법을 보여 드리겠습니다. 더 이상 고민하지 않고 시작합시다! 키 테이크 아웃

튜토리얼은 필터 버튼과 필터링 할 요소를 사용하여 HTML 구조를 설정하여 카테고리로 그룹화하여 jQuery 및 CSS 애니메이션을 사용하여 필터링 가능한 구성 요소를 만드는 방법을 보여줍니다. CSS 설정에는 활성 필터 카테고리에 해당하는 '활성'클래스를 할당하고 Flexbox를 사용하여 대상 요소의 레이아웃을 생성하고 두 가지 다른 CSS 키 프레임 애니메이션을 정의하여 요소를 표시하는 것이 포함됩니다.

. jQuery 설정에는 필터 버튼의 클릭 이벤트를 처리하고 모든 버튼에서 '활성'클래스를 제거하고 선택한 버튼에만 할당하고 버튼의 데이터 필터 속성의 값을 검색하고 평가하고 사용하여 코드를 작성하는 것이 포함됩니다. 선택한 필터를 기반으로 요소를 보여 주거나 숨기는 CSS 애니메이션.

튜토리얼은 또한 각 () 메소드를 대상 요소를 반복하기 위해 요소를 순차적으로 애니메이션하기 위해 코드를 수정하는 방법과 지연 메소드를 사용하여 각 요소가 페이딩하기 전에 대기해야합니다. >

html 설정 첫 번째 단계로서, 나는 당신에게 구성 요소의 HTML 구조를 보여 드리겠습니다. 다음 마크 업을 고려하십시오

기본 마크 업을 설정했습니다. 다음은 다음과 같습니다.

먼저 필터 버튼과 필터링하려는 요소를 정의했습니다 (대상 요소라고합니다). 다음으로 대상 요소를 세 가지 범주 (파란색, 녹색 및 빨간색)로 그룹화했으며 데이터 카테고리 속성을 제공했습니다. 이 속성의 값은 각 요소가 속한 범주를 결정합니다. 또한 필터 버튼에 데이터 필터 속성을 할당했습니다. 이 속성의 값은 원하는 필터 범주를 지정합니다. 예를 들어, data-filter = "red"속성/값이있는 버튼은 빨간색 범주에 속하는 요소 만 표시됩니다. 반면에 데이터 필터 = "All"이있는 버튼에는 모든 요소가 표시됩니다.

이제 필요한 HTML에 대한 개요가 있었으므로 CSS를 탐색 할 수 있습니다. CSS 설정 필터 카테고리가 활성화 될 때마다 해당 필터 버튼은 활성 클래스를 수신합니다. 기본적으로 Data-Filter = "All"속성이있는 버튼은이 클래스를 얻습니다.
여기에는 관련 스타일이 있습니다
• 또한 Flexbox를 사용하여 대상 요소의 레이아웃을 생성하겠습니다.

  아래 관련 스타일을 참조하십시오

  마지막으로, 나중에 사용하는 두 가지 CSS 키 프레임 애니메이션을 정의하고 있습니다.

  마크 업과 CSS가 제자리에 있으면 JavaScript/jQuery를 구축 할 수 있습니다. jQuery 설정 아래 코드를 살펴보고 무슨 일이 일어나고 있는지 설명하겠습니다.

  필터 버튼을 클릭 할 때마다 다음이 발생합니다.

  <span><span><span><div> class<span>="cta filter"</span>>
    <span><span><span><a> class<span>="all active"</span> data-filter<span>="all"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show All<span><span></span>></span>
  </span>  <span><span><span><a> class<span>="green"</span> data-filter<span>="green"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show Green Boxes<span><span></span>></span>
  </span>  <span><span><span><a> class<span>="blue"</span> data-filter<span>="blue"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show Blue Boxes<span><span></span>></span>
  </span>  <span><span><span><a> class<span>="red"</span> data-filter<span>="red"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show Red Boxes<span><span></span>></span>
  </span><span><span><span></span></span></span></span></span></span></span>
  </div></span>></span>
  </span>
  <span><span><span><div> class<span>="boxes"</span>>
    <span><span><span><a> class<span>="red"</span> data-category<span>="red"</span> href<span>="#"</span>></a></span>Box1<span><span></span>></span>
  </span>  <span><span><span><a> class<span>="green"</span> data-category<span>="green"</span> href<span>="#"</span>></a></span>Box2<span><span></span>></span>
  </span>  <span><span><span><a> class<span>="blue"</span> data-category<span>="blue"</span> href<span>="#"</span>></a></span>Box3<span><span></span>></span>
  </span>
   <span><!-- other anchor/boxes here ... -->
  </span>
  <span><span><span></span></span></span></span></span></span>
  </div></span>></span></span>

  Active 클래스는 모든 버튼에서 제거되고 선택한 버튼에만 할당됩니다. 버튼의 데이터 필터 속성의 값이 검색되고 평가됩니다. 데이터 필터의 값이 모두 있으면 모든 요소가 나타나야합니다. 그렇게하기 위해 먼저 숨기고 모든 요소가 숨겨지면 회전 오른쪽 또는 축소 CSS 애니메이션을 사용하여 보여줍니다. 값이 전부가 아닌 경우 해당 범주의 대상 요소가 나타나야합니다. 그렇게하기 위해 먼저 모든 요소를 ​​숨기고 모든 요소가 숨겨져 있으면 회전 오른쪽 또는 확대 한 CSS 애니메이션을 사용하여 관련 카테고리의 요소 만 표시합니다.

  이 시점에서 한 가지를 명확히하는 것이 중요합니다. 위 코드의 Fadeout () 메소드에 대한 구문에 주목하십시오. 다음과 같이 보입니다

  당신은 아마도이 구문에 더 익숙 할 것입니다 :

  <span><span>.filter a</span> {
  </span>  <span>position: relative;
  </span><span>}
  </span>
  <span><span>.filter a.active:before</span> {
  </span>  <span>content: '';
  </span>  <span>position: absolute;
  </span>  <span>left: 0;
  </span>  <span>top: 0;
  </span>  <span>display: inline-block;
  </span>  <span>width: 0;
  </span>  <span>height: 0;
  </span>  <span>border-style: solid;
  </span>  <span>border-width: 15px 15px 0 0;
  </span>  <span>border-color: #333 transparent transparent transparent;
  </span><span>}</span>

  이 선언은 다른 의미를 갖습니다

  첫 번째 경우 콜백은 모든 대상 요소가 숨겨진 후에 만 ​​실행됩니다. jQuery의 문서의 Promise () 섹션을 방문 하여이 접근법에 대한 추가 정보를 배울 수 있습니다. 두 번째 경우 콜백은 여러 번 발사됩니다. 구체적으로, 요소가 숨겨 질 때마다 실행됩니다

  아래의 데모는 축소 인 애니메이션을 사용합니다 : Codepen에서 SitePoint (@SitePoint)의 CSS 및 jQuery (Zoom Animation)가있는 정렬/필터링 구성 요소를 참조하십시오. 이 데모는 회전 오른쪽 애니메이션을 사용합니다 : Codepen의 SitePoint (@SitePoint)에 의해 CSS 및 jQuery (회전 애니메이션 포함)가있는 정렬/필터링 구성 요소를 참조하십시오. 물론, 앞서 언급 한 CSS 애니메이션은 선택 사항입니다. 이러한 특정 애니메이션이 마음에 들지 않으면 자유롭게 제거하고 jQuery 's Fadein () 메소드 만 사용하여 요소를 공개하십시오. 이제 구성 요소가 어떻게 작동하는지 이해하므로 다른 변형을 만드는 방법을 보여 드리겠습니다.

  애니메이션 요소는 순차적으로 입니다 지금까지 모든 요소가 동시에 나타나는 것을 알 수 있습니다. 이제 코드를 순차적으로 표시하도록 코드를 수정하겠습니다

  <span><span><span><div> class<span>="cta filter"</span>>
    <span><span><span><a> class<span>="all active"</span> data-filter<span>="all"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show All<span><span></span>></span>
  </span>  <span><span><span><a> class<span>="green"</span> data-filter<span>="green"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show Green Boxes<span><span></span>></span>
  </span>  <span><span><span><a> class<span>="blue"</span> data-filter<span>="blue"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show Blue Boxes<span><span></span>></span>
  </span>  <span><span><span><a> class<span>="red"</span> data-filter<span>="red"</span> href<span>="#"</span> role<span>="button"</span>></a></span>Show Red Boxes<span><span></span>></span>
  </span><span><span><span></span></span></span></span></span></span></span>
  </div></span>></span>
  </span>
  <span><span><span><div> class<span>="boxes"</span>>
    <span><span><span><a> class<span>="red"</span> data-category<span>="red"</span> href<span>="#"</span>></a></span>Box1<span><span></span>></span>
  </span>  <span><span><span><a> class<span>="green"</span> data-category<span>="green"</span> href<span>="#"</span>></a></span>Box2<span><span></span>></span>
  </span>  <span><span><span><a> class<span>="blue"</span> data-category<span>="blue"</span> href<span>="#"</span>></a></span>Box3<span><span></span>></span>
  </span>
   <span><!-- other anchor/boxes here ... -->
  </span>
  <span><span><span></span></span></span></span></span></span>
  </div></span>></span></span>

  위의 코드는 이전 코드와 비슷해 보이지만 몇 가지 뚜렷한 차이점이 있습니다.

  먼저, 각 () 메소드를 사용하여 대상 요소를 반복합니다. 또한 루프로서 현재 요소의 인덱스 (제로 기반)의 인덱스를 얻고 숫자 (예 : 200)를 곱합니다. 파생 숫자는 지연 방법에 대한 인수로 전달됩니다. 이 숫자는 각 요소가 페이딩하기 전에 기다려야하는 밀리 초의 양을 나타냅니다. 다음으로, 나는 마무리 () 메소드를 사용하여 특정 사례에서 선택한 요소에 대한 현재 실행중인 애니메이션을 중지합니다. 사용법을 이해하려면 다음은 시나리오입니다. 필터 버튼을 클릭 한 다음 모든 요소가 나타나기 전에 버튼을 다시 클릭하십시오. 모든 요소가 사라집니다. 마찬가지로이 방법의 두 인스턴스를 제거한 후이 테스트를 다시 실행하십시오. 이 경우 요소가 바람직하지 않은 효과를 받는다는 것을 알 수 있습니다. 때때로이 방법을 제대로 호출하는 것은 까다로울 수 있습니다. 이 예에서는 배치해야 할 곳을 찾을 때까지 약간 실험해야했습니다.

  아래 데모는 축소 인 애니메이션을 사용하여 필터링 된 요소를 순차적으로 애니메이션합니다. Codepen의 sitepoint (@SitePoint)에 의해 CSS 및 JQuery의 순차적 필터링/정렬 구성 요소를 참조하십시오. 아래 데모는 회전 오른쪽 애니메이션을 사용하여 필터링 된 요소를 순차적으로 애니메이션합니다. Codepen의 sitepoint (@SitePoint)에 의해 CSS 및 jQuery로 순차적 필터링/정렬을 참조하십시오.
  • 결론
  이 동일한 구성 요소는 jQuery없이 구축 될 수 있으며 성능이 향상 될 수 있지만 jQuery의 Fadein () 및 Fadeout () 메소드를 사용하는 기능은 jQuery에 사용할 수있는 특정 기능을 이용할 수있는 더 간단한 코드를 허용합니다. 다른 솔루션이 있거나 코드를 개선하는 방법이 있으면 의견에 알려 드리겠습니다.
  • CSS 애니메이션 및 jQuery로 필터링 구성 요소 구축에 대한 자주 묻는 질문 (FAQ) 구성 요소에 더 많은 필터를 추가 할 수 있습니까?

  구성 요소에 더 많은 필터를 추가하는 것은 매우 간단합니다. CSS에서 새 필터를 정의한 다음 jQuery 코드에 해당 기능을 추가해야합니다. 예를 들어, '그레이 스케일'필터를 추가하려면 먼저 CSS에서 다음과 같이 정의 할 수 있습니다. }

  그러면 jQuery 코드에서 새 케이스를 스위치 문에 추가하여 새로 처리 할 수 ​​있습니다. 필터 :

  스위치 (필터) { 케이스 '그레이스 스케일': $ container.addclass ( 'Filter-Grayscale');

  break ;

  // ...

  }

  사용자가 새 필터를 활성화 할 수있는 버튼이나 다른 UI 요소를 추가해야합니다.이 필터링 구성 요소를 다른 JavaScript 라이브러리와 함께 사용할 수 있습니까?

  예,이 필터링 구성 요소를 다른 JavaScript 라이브러리와 함께 사용할 수 있습니다. JQuery는 다른 라이브러리와 호환되도록 설계되었습니다. 다른 라이브러리 사이에 충돌이 없는지 확인하면됩니다. 충돌이있는 경우 jQuery의 noconflict () 메소드를 사용하여 피할 수 있습니다. 이 메소드는`= 바로 가기 식별자의 홀드를 출시하여 다른 라이브러리에서 사용할 수 있습니다. 그런 다음 jQuery의 전체 이름을 사용하여 메소드를 호출 할 수 있습니다.

  필터 간의 전환을 어떻게 애니메이션 할 수 있습니까?

  CSS 전환을 사용하여 필터 간의 전환을 애니메이션하는 방법. 애니메이션하려는 요소에 전환 속성을 추가해야합니다. 이 속성은 CSS 속성을 전환, 전환 지속 시간, 타이밍 기능 및 전환이 시작되기 전 지연을 지정합니다. 예를 들어, 1 초에 걸쳐 필터 속성의 전환을 애니메이션하려면 다음 CSS를 추가 할 수 있습니다. 🎜> 그러면 jQuery를 사용하여 필터를 변경하면 전환이 애니메이션됩니다.

  이 필터링 구성 요소를 여러 요소에서 동일하게 사용할 수 있습니까? Page?
  예,이 필터링 구성 요소를 같은 페이지의 여러 요소에서 사용할 수 있습니다. 각 요소에 jQuery로 선택하는 데 사용할 수있는 고유 한 ID 또는 클래스가 있는지 확인하면됩니다. 그런 다음 필터링 구성 요소를 각 요소에 개별적으로 적용 할 수 있습니다.
  필터를 응답 할 수 있습니까?
  필터를 반응하는 방법은 CSS 및 JQuery 코드를 뷰포트. CSS 미디어 쿼리를 사용하여 다양한 뷰포트 크기에 다른 스타일을 적용 할 수 있습니다. jQuery 코드에서는 $ (Window) .resize () 메서드를 사용하여 창이 크기가 크기로 표시 될 때 코드를 실행할 수 있습니다. 그런 다음 창의 새 크기에 따라 필터를 조정할 수 있습니다.
  jQuery없이 CSS 애니메이션을 사용할 수 있습니까?
  예, jQuery없이 CSS 애니메이션을 사용할 수 있습니다. CSS 애니메이션은 CSS의 기능이며 JavaScript가 필요하지 않습니다. 그러나 JQuery는 특히 복잡한 애니메이션이 있거나 사용자 작업에 응답하여 요소를 애니메이션하려는 경우 애니메이션을보다 쉽게 ​​관리하고 제어 할 수 있습니다.
  사용자 정의 필터를 추가 할 수 있습니까?

  사용자 정의 필터를 추가하려면 원하는 필터 효과가있는 새 CSS 클래스를 정의한 다음 jQuery 코드에서 해당 기능을 추가해야합니다. 이 과정은 질문에 대한 답변에 설명 된대로 더 많은 필터를 추가하는 것과 유사합니다.이 필터링 구성 요소를 동적 컨텐츠와 함께 사용할 수 있습니까?

  예,이 필터링 구성 요소를 동적 컨텐츠와 함께 사용할 수 있습니다. 필터링 구성 요소가로드 된 후 컨텐츠에 적용되는지 확인하면됩니다. AJAX 요청의 콜백 함수 또는 $ (문서) .ready () 함수에서 필터링 구성 요소를 호출하여 페이지가로드 될 때 컨텐츠를로드하는 경우

  최적화 방법을 최적화 할 수 있습니다. 필터링 구성 요소의 성능?

  필터링 구성 요소의 성능을 최적화하는 데 몇 가지 전략이 포함될 수 있습니다. 한 가지 전략은 DOM 조작 수를 최소화하는 것입니다. jQuery가있는 클래스를 추가하거나 제거 할 때마다 브라우저가 레이아웃을 다시 계산하게하여 비쌀 수 있습니다. 이를 최소화하기 위해 변경 사항을 함께 그룹화하여 한 번에 모두 만들 수 있습니다. 또 다른 전략은 CSS 전환이 일반적으로 더 성능이 좋기 때문에 jQuery 애니메이션 대신 CSS 전환을 사용하는 것입니다.

  이 필터링 구성 요소를 백엔드 데이터베이스와 함께 사용할 수 있습니까?

  예,이 필터링을 사용할 수 있습니다. 백엔드 데이터베이스가있는 구성 요소. 데이터베이스에서 데이터를 검색하려면 서버에 AJAX 요청을 작성한 다음 jQuery를 사용하여 필터링 구성 요소를 데이터에 적용해야합니다. 이를 통해 데이터베이스에 저장된 기준에 따라 데이터를 필터링 할 수 있습니다.

위 내용은 CSS 애니메이션 및 jQuery로 필터링 구성 요소 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!