// Transitioning states with element.animate()

// -------------------------------------------

var isOpen = false;

var openHeight = '100px';

var closedHeight = '0px';

var duration = 300;

​

button.addEventListener('click', function() {

  // Prevent clicks while we transition states.

  button.disabled = true;

  button.textContent = '...';

​

  // Determine where we're animation from/to.

  var fromHeight = isOpen ? openHeight : closedHeight;

  var toHeight = isOpen ? closedHeight : openHeight;

​

  // Start an animation transitioning from our current state to the final state.

  var animation = element.animate({ height: [fromHeight, toHeight] }, duration);

​

  // Update the button once the animation finishes.

  animation.onfinish = function() {

    isOpen = !isOpen;

    button.textContent = isOpen ? 'Close' : 'Open';

    button.disabled = false;

  };

​

  // Put our element in the final state.

  // Inline styles are overridden by active animations.

  // When the above animation finishes it will stop applying and

  // the element's style will fall back onto this inline style value.

  element.style.setProperty('height', toHeight);

});

​