-webkit-transition-property

From WebOS101

Use this CSS property to define a set of CSS properties that, when changed via JavaScript, will cause the element to animate its transition to the new state, rather than adjusting instantateously. You must also set -webkit-transition-duration to a non-zero duration.

This property can be used in conjunction with -webkit-transform. Suppose you have an arrow graphic that points upwards, and the following CSS:

.arrow {
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 1s;
}
 
.arrow.pointing-right {
  -webkit-transform: rotate(90deg);
}
 
.arrow.pointing-left {
  -webkit-transform: rotate(270deg);
}

When an element with class "arrow" gets the added classes "pointing-left" or "pointing-right", it will smoothly rotate to the position dictated by -webkit-transform. If the pointing class is removed in mid-transition, the arrow will smoothly revert back to pointing upward.

To capture the event fired when the animation is completed, find the element's dom node and add an event listener for "webkitTransitionEnd". For example, if your enyo kind has a component named myElement and a handler function named handleWebkitTransitionEnd then you can attach the handler to the element like so:

if (this.$.myElement.hasNode()) {
  var node = this.$.myElement.node;
  node.addEventListener("webkitTransitionEnd", (function(scope) {return function(event) {
    scope.handleWebkitTransitionEnd(event);
  }; })(this), false);
}

The downside to transitions is that it is difficult to cancel the animations.