Performing a transition involves creating a snapshot of the pre-transition state of the box (the "source" snapshot), rendering changes to the box in an off-screen snapshot (the "target" snapshot), creating a transition object, and then performing the transition using both the source and target object.

Let's look at an example:

var box = scene.getElementById("myBoxIdHere");
if (box)
{
  // Create a snapshot of the box in its current state
  //    and attach it to the box as the source snapshot.
  var snapshot1 = box.createSnapshot(false);
  box.attachSourceSnapshot(snapshot1);

  // Create a blank snapshot object and
  //   attach it to the box as the target snapshot.
  var snapshot2 = box.createSnapshot(true);
  box.attachTargetSnapshot(snapshot2);

  // Make changes to the box here:
  //   (Note: the changes you make will not appear on screen until
  //    after the transition executes.)
  box.setStyle("fill", "green")

// Render changes made to the box to the target snapshot
  box.renderTargetSnapshot();

  if (snapshot1 && snapshot2)
  {
      // Create a transition.
      var transition =  box.createTransition();

      if (transition)
      {
              // Do the transition.

              // Specify the transition type.
              transition.type = "dissolve";

              // Specify the duration is in milliseconds.
              transition.duration = 1000;

              // Optionally, specify dynamics.
              transition.dynamicsType = "spring";

              // Perform the transition.
              transition.perform(snapshot1, snapshot2);
      }
  }

  // Perform cleanup.
  box.detachSourceSnapshot();
  box.detachTargetSnapshot();
}

This is how the above code works:

To begin the transition, the createSnapshot(false) function creates a snapshot of the box in its current state (snapshot1), which is then attached to the box as the source snapshot. The createSnapshot(true) function creates a blank target snapshot (snapshot2), which is also attached to the box.

The createSnapshot method used in this function takes one parameter: If the parameter is true the method will create a blank snapshot. If the parameter is false the method will create a new snapshot and initializes it with the contents of this box and return the snapshot object.

Next, we update the box or any of its children and then call the renderTargetSnapshot function to render the changes made to the target snapshot.

As the last step, the createTransition function creates a transition object, on which the type, duration, and dynamicsType properties are set. Then, the perform method executes the transition using the source and target snapshots.