Config
Table of Contents

Mixin

O.AnimatableView

Mix this into an O.View class to automatically animate all changes to the view's O.View#layerStyles property.

"use strict";

( function ( NS ) {

NS.AnimatableView = {

Property

O.AnimatableView#animateLayer

  • Boolean

If true, changes to the view's O.View#layerStyles property will be animated. If false, the changes will be set without animation.

animateLayer: true,

Property

O.AnimatableView#animateLayerDuration

  • Number

The length of time in milliseconds to animate changes to the view's layer styles.

animateLayerDuration: 300,

Property

O.AnimatableView#animateLayerEasing

  • Function

The easing function to use for the animation of the view's layer styles.

animateLayerEasing: NS.Easing.ease,

Property

O.AnimatableView#animating

  • Number

The number of properties on the view currently being animated. Note, O.View#layerStyles counts as a single property.

animating: 0,

Method

O.AnimatableView#willAnimate()

This method is called by the O.Animation class when it begins animating a property on the object. Increments the <#animating> property.

willAnimate: function () {
   this.increment( 'animating', 1 );
 },

Method

O.AnimatableView#didAnimate()

This method is called by the O.Animation class when it finshes animating a property on the object. Decrements the <#animating> property.

didAnimate: function () {
   this.increment( 'animating', -1 );
 },

Property

O.AnimatableView#layerAnimation

  • O.CSSStyleAnimation|O.StyleAnimation

An appropriate animation object (depending on browser support) to animate the layer styles. Automatically generated when first accessed.

layerAnimation: function () {
   var Animation = NS.UA.cssProps.transition ?
     NS.CSSStyleAnimation : NS.StyleAnimation;
   return new Animation({
     object: this,
     element: this.get( 'layer' )
   });
 }.property(),

Method

O.AnimatableView#redrawLayerStyles( layer, oldStyles )

Overrides O.View#redrawLayerStyles to animate the change in styles instead of setting them immediately.

Parameters

layerElement The view's layer.
oldStylesObject|null The previous layer styles for the view.
redrawLayerStyles: function ( layer, oldStyles ) {
   var newStyles = this.get( 'layerStyles' ),
     layerAnimation = this.get( 'layerAnimation' ),
     setStyle = NS.Element.setStyle,
     property, value;

   // Animate
   if ( this.get( 'animateLayer' ) && this.get( 'isInDocument' ) ) {
     if ( !layerAnimation.current ) {
       layerAnimation.current = oldStyles || newStyles;
     }
     layerAnimation.animate(
       newStyles,
       this.get( 'animateLayerDuration' ),
       this.get( 'animateLayerEasing' )
     );
   }
   // Or just set.
   else {
     layerAnimation.stop();
     layerAnimation.current = newStyles;
     setStyle( layer, 'transition-property', 'none' );
     for ( property in newStyles ) {
       value = newStyles[ property ];
       if ( value !== oldStyles[ property ] ) {
         setStyle( layer, property, value );
       }
     }
   }
   // Just remove styles that are not specified in the new styles, but were
   // in the old styles
   for ( property in oldStyles ) {
     if ( !( property in newStyles ) ) {
       setStyle( layer, property, null );
     }
   }
 }
};

}( O ) );
Animation
Application
Core
DataStore
DOM
DragDrop
Foundation
IO
Localisation
Selection
Parser
TimeZones
Storage
Touch
CollectionViews
UA
ContainerViews
ControlViews
PanelViews
View