Angularjs: with Ng-Animate & Ng-View, How to Make a 3D Cube Rotation Effect

AngularJS: with ng-animate & ng-view, how to make a 3D cube rotation effect?

I'd like to throw this into the ring:

http://jsfiddle.net/bnyJ6/1/

.animation{
    -webkit-perspective:2000px;
    -moz-perspective:2000px;
    -o-perspective: 2000px;
    perspective: 2000px;
}

.cube {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
}

.animate-enter, 
.animate-leave { 
    -webkit-transition: 3000ms linear -webkit-transform, 3000ms linear opacity, 3000ms linear background-color;
    -moz-transition: 3000ms linear -moz-transform, 3000ms linear opacity, 3000ms linear background-color;
    -o-transition: 3000ms linear -o-transform, 3000ms linear opacity, 3000ms linear background-color;
    transition: 3000ms linear transform, 3000ms linear opacity, 3000ms linear background-color;
    position: absolute;
}

.animate-enter {
    background-color: green;

    -webkit-transform-origin: 0% 50%;
    -moz-transform-origin: 0% 50%;
    -o-transform-origin: 0% 50%;
    transform-origin: 0% 50%;

    -webkit-transform: translateX(100%) rotateY(90deg);
    -moz-transform: translateX(100%) rotateY(90deg);
    -o-transform: translateX(100%) rotateY(90deg);
    transform: translateX(100%) rotateY(90deg);

    opacity: 0;
}
.animate-enter.animate-enter-active {
    background-color: yellow;

    -webkit-transform: translateX(0%) rotateY(0deg);
    -moz-transform: translateX(0%) rotateY(0deg);
    -o-transform: translateX(0%) rotateY(0deg);
    transform: translateX(0%) rotateY(0deg);

    opacity: 1;
}

.animate-leave {
    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -o-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}
.animate-leave.animate-leave-active {
    background-color: gray;

    -webkit-transform: translateX(-100%) rotateY(-90deg);
    -moz-transform: translateX(-100%) rotateY(-90deg);
    -o-transform: translateX(-100%) rotateY(-90deg);
    transform: translateX(-100%) rotateY(-90deg);

    opacity: 0;
}

The trick is to shift the transform-origin to the right for the first element, and to the left for the second element, that way both elements are transformed around the same point, making it look as if they were connected.

In order to make it finally work, the transition properties need to be targeted separately, otherwise it would animate the transform-origin property too, which would look funky. One would think that the proper use of setup and active classes for NgAnimate would prevent this behaviour, but unfortunately it doesn't. I guess the delay that Angular uses (currently 1 millisecond) before adding the active classes is too short.

ps. I guess you already knew, but this is not IE compatible.

Using ng-animate with animate.css

Steps:-

1) Provide dependency:-

angular.module('yo', [
        'ngAnimate'
    ]);

with "angular-animate.min.js" added in your script tag.

2) There are three ways to perform animation:-
a)CSS Transitions.
b) CSS Keyframe Animations
c) JavaScript Animations.

3) Choose any of the above like:-
For example if your template is

<div ng-init="on=true">
  <button ng-click="on=!on">Toggle On/Off</button>
  <div class="my-special-animation" ng-if="on">
    This content will enter and leave
  </div>
</div>

Animation by CSS Transition required class attribute in your element and just add following css:-

.my-special-animation.ng-enter {
  -webkit-transition:0.5s linear all;
  transition:0.5s linear all;

  background:red;
}

/* destination animations */
.my-special-animation.ng-enter.ng-enter-active {
  background:blue;
}

plunker :- http://plnkr.co/edit/?p=preview

CSS Keyframe animations are more extensive than Transitions and they're supported by the same browsers (other than IE9 and below). The CSS naming style is similar, but there is no need to use an -active class since keyframe animations are fully managed within a CSS @keyframes declaration block

.my-special-animation.ng-enter {
  -webkit-animation:0.5s red-to-blue;
  animation:0.5s red-to-blue;
}

@keyframes red-to-blue {
  from { background:red; }
  to { background:blue; }
}

@-webkit-keyframes red-to-blue {
  from { background:red; }
  to { background:blue; }
}

Plunker:- http://plnkr.co/edit/?p=preview

JavaScript Animations
If you want to perform animations that have more control then you can always use JavaScript animations. This works by defining a factory-like function inside of your module code like so:

myApp.animation('.my-special-animation', function() {
  return {
    enter : function(element, done) {
      jQuery(element).css({
        color:'#FF0000'
      });

      //node the done method here as the 2nd param
      jQuery(element).animate({
        color:'#0000FF'
      }, done);

      return function(cancelled) {
        /* this (optional) function is called when the animation is complete
           or when the animation has been cancelled (which is when
           another animation is started on the same element while the
           current animation is still in progress). */
        if(cancelled) {
          jQuery(element).stop();
        }
      }
    },

    leave : function(element, done) { done(); },
    move : function(element, done) { done(); },

    beforeAddClass : function(element, className, done) { done(); },
    addClass : function(element, className, done) { done(); },

    beforeRemoveClass : function(element, className, done) { done(); },
    removeClass : function(element, className, done) { done(); },

    allowCancel : function(element, event, className) {}
  };
});

Plunker:- http://plnkr.co/edit/?p=preview

Related Topics