Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/ko/docs/Web/API/Document/startViewTransition below:

Document: startViewTransition() 메서드 - Web API

Limited availability

Experimental: 이 기능은 실험적인 기능입니다.
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

View Transitions API의 startViewTransition() 메서드는 새로운 ë·° 전환을 시작하고 이를 나타내는 ViewTransition 객체를 반환합니다.

startViewTransition()이 호출되면 ë·° 전환 과정에 설명된 대로 일련의 단계를 따릅니다.

startViewTransition(callback)

callback

일반적으로 ë·° 전환 과정 중에 DOM을 업데이트하기 위해 호출되는 콜백 함수로, Promise를 반환합니다. 콜백은 API가 현재 페이지의 스크린샷을 찍으면 호출됩니다. 콜백에 의해 반환된 프로미스가 충족되면 다음 프레임에서 ë·° 전환을 시작합니다. 콜백에 의해 반환된 프로미스가 거부되면 전환이 중단됩니다.

ViewTransition 객체 인스턴스입니다.

기본 ë·° 전환 데모에서 updateView() 함수는 View Transitions API를 지원하는 브라우저와 지원하지 않는 브라우저 모두 처리합니다. 지원 브라우저에서는 반환 값에 대한 걱정없이 startViewTransition()을 호출하여 ë·° 전환 과정을 설정합니다.

function updateView(event) {
  // 이벤트가 <a> 태그에서 실행되는지, <img> 태그에서 실행하는지에 따라 차이를 처리합니다.
  let targetIdentifier;
  if (event.target.firstChild === null) {
    targetIdentifier = event.target;
  } else {
    targetIdentifier = event.target.firstChild;
  }

  const displayNewImage = () => {
    const mainSrc = `${targetIdentifier.src.split("_th.jpg")[0]}.jpg`;
    galleryImg.src = mainSrc;
    galleryCaption.textContent = targetIdentifier.alt;
  };

  // 뷰 전환을 지원하지 않는 브라우저를 위한 폴백입니다.
  if (!document.startViewTransition) {
    displayNewImage();
    return;
  }

  // 뷰 전환을 사용합니다.
  const transition = document.startViewTransition(() => displayNewImage());
}

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4