• Web APIs
  • Document
  • Constructor
    1. alinkColor Deprecated
    2. all Deprecated
    3. anchors Deprecated
    4. applets Deprecated
    5. bgColor Deprecated
    6. children
    7. currentScript
    8. doctype
    9. domain Deprecated
    10. featurePolicy Experimental
    11. fgColor Deprecated
    12. fragmentDirective
    13. fullscreen Deprecated
    14. hidden
    15. lastModified
    16. lastStyleSheetSet Non-standard Deprecated
    17. linkColor Deprecated
    18. pictureInPictureEnabled
    19. preferredStyleSheetSet Non-standard Deprecated
    20. prerendering Experimental
    21. rootElement Deprecated
    22. selectedStyleSheetSet Non-standard Deprecated
    23. styleSheetSets Non-standard Deprecated
    24. visibilityState
    25. vlinkColor Deprecated
    26. xmlEncoding Deprecated
    27. xmlVersion Deprecated
  • Static methods
    1. browsingTopics() Experimental Non-standard
    2. caretRangeFromPoint() Non-standard
    3. clear() Deprecated
    4. createCDATASection()
    5. createElementNS()
    6. createEvent() Deprecated
    7. createNSResolver() Deprecated
    8. createTouch() Non-standard Deprecated
    9. createTouchList() Non-standard Deprecated
    10. enableStyleSheetsForSet() Non-standard Deprecated
    11. execCommand() Deprecated
    12. getAnimations()
    13. getElementsByTagName()
    14. hasStorageAccess()
    15. mozSetImageElement() Non-standard
    16. queryCommandEnabled() Non-standard Deprecated
    17. queryCommandState() Non-standard Deprecated
    18. queryCommandSupported() Non-standard Deprecated
    19. releaseCapture() Non-standard
    20. requestStorageAccessFor() Experimental
    21. write() Deprecated
    22. afterscriptexecute Non-standard Deprecated
    23. beforescriptexecute Non-standard Deprecated
    24. fullscreenchange
    25. pointerlockerror
    26. prerenderingchange Experimental
    27. scrollsnapchange Experimental
    28. scrollsnapchanging Experimental
    29. Node
    30. Learn more
    31. See full compatibility
  • The startViewTransition() method of the ViewTransition object to represent it.

    When startViewTransition() is invoked, a sequence of steps is followed as explained in The view transition process.

    Syntax

    js
    startViewTransition()
    startViewTransition(updateCallback)
    

    Parameters

    updateCallback Optional

    An optional callback function typically invoked to update the DOM during the SPA view transition process, which returns a Promise. The callback is invoked once the API has taken a snapshot of the current page. When the promise returned by the callback fulfills, the view transition begins in the next frame. If the promise returned by the callback rejects, the transition is abandoned.

    Return value

    A ViewTransition object instance.

    Examples

    Basic usage

    In our Basic SPA View Transitions demo, the updateView() function handles both browsers that do and don't support the View Transition API. In supporting browsers, we invoke startViewTransition() to trigger the view transition process without worrying about the return value.

    js
    function updateView(event) {
      / Handle the difference in whether the event is fired on the <a> or the <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;
      };
    
      / Fallback for browsers that don't support View Transitions:
      if (!document.startViewTransition) {
        displayNewImage();
        return;
      }
    
      / With View Transitions:
      const transition = document.startViewTransition(() => displayNewImage());
    }
    

    Specifications

    Specification
    CSS View Transitions Module Level 1
    # dom-document-startviewtransition

    Browser compatibility

    BCD tables only load in the browser

    See also