바닐라 JS 효과 방법

Vanilla JS Effect Methods

과거에는 jQuery로 작업을 많이 했는데, jQuery를 좋아하는 이유는 간단하고 가벼운 구문으로 유용한 메서드를 많이 제공한다는 점입니다. 가장 많이 사용되는 jQuery 방법 중 하나는 웹사이트용 애니메이션 효과를 만드는 데 사용되는 효과 방법입니다.

예:

W3schools는 여기에 모든 JQuery 효과 방법을 나열했습니다

그러나 이제 JS 라이브러리가 엄청나게 증가함에 따라 jQuery는 시대에 뒤떨어진 것처럼 보이며 일부 프로젝트에서는 개발자가 jQuery 코드를 순수 JS로 대체해야 합니다.

hide() / show()와 동일한 기능을 만드는 것은 매우 쉽습니다. 표시 스타일만 편집하면 됩니다

element.style.display = 'block' // or none

하지만 fadeIn()/fadeOut()과 같은 더 복잡한 효과를 사용하려면 더 많은 코드를 작성해야 합니다.

바닐라 JS의 쓰기 효과 방법의 또 다른 문제는 장황한 구문입니다. jQuery 메서드를 사용하면 이를 확인할 수 있습니다.

$(".myClass").slideDown();

이것은 매우 읽기 쉽고 직관적입니다. jQuery 선택기로 요소를 찾은 다음 요소의 메서드로 SlideDown 메서드를 호출합니다.
이전에 SlideToggle 메서드를 정의한 경우 코드는 바닐라 JS에서 동일한 기능을 구현합니다.

const element = document.querySelector(".myClass");
slideToggle(element);

요소를 쿼리한 다음 그것을 SlideToggle() 함수에 전달하면 jQuery를 사용한 샘플보다 네이티브가 덜하고 가독성도 떨어지는 것 같습니다.

여기서 비결은 HTMLElement.prototype을 사용하여 HTML 요소에 메소드를 추가하고 효과 기능을 HTML 요소의 메소드로 사용할 수 있다는 것입니다. 단순화를 위해 hide() 메서드를 정의해 보겠습니다.

HTMLElement.prototype.hide = function() {
  this.style.display = 'none'
}

document.querySelector(".myClass").hide()

재사용을 위해 여기에 효과를 위한 바닐라 JS 메서드를 만들었습니다. 코드베이스 어딘가에 넣고 HTML 요소의 기본 메소드로 사용하세요.

위 내용은 바닐라 JS 효과 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：