MGJD - Simple Animation in AngularJS

Learn How to animate stuff in AngularJS

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<div class="alert alert-success" ng-show='processed' ng-animate="'processed'">
  <b>Well done!</b> We've successfully processed the order. <a href="javascript:void(0);" ng-click='processed = false'><b>Undo?</b></a>
</div>
<div class="row" ng-hide='processed' ng-animate="'processed'">
  <div class="span6">
    <form class="form-horizontal">
      <legend>Billing Address</legend>
      <div class="control-group">
        <label class="control-label">Name:</label>
        <div class="controls">
          <input type="text" ng-model="billing_name" ng-change="reflect()" placeholder="Full Name">
        </div>
      </div>
      <div class="control-group">
        <label class="control-label">Address:</label>
        <div class="controls">
          <textarea ng-model="billing_address" ng-change="reflect()" cols="30" rows="4"></textarea>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label">City:</label>
        <div class="controls">
          <select ng-model="billing_city" ng-change="reflect()" ng-options="c.name for c in cities"></select>
        </div>
      </div>
      <div class="control-group">
        <div class="controls">
          <button class='btn btn-primary btn-large' ng-click="setProcessed()">Process Order</button>
        </div>
      </div>
    </form>
  </div>
  <div class="span6">
    <form class="form-horizontal">
      <legend>
        Shipping Address
        <input type="checkbox" ng-model="same" ng-change="reflect()">
        <small ng-class="{'strike': !same}">same as billing</small>
      </legend>
      <div class="control-group">
        <label class="control-label">Name:</label>
        <div class="controls">
          <input type="text" ng-model="shipping_name" placeholder="Full Name"...

CSS

.strike { text-decoration: line-through; }
.processed-show {
    -webkit-transition:all linear 0.5s;
    -moz-transition:all linear 0.5s;
    -ms-transition:all linear 0.5s;
    -o-transition:all linear 0.5s;
    transition:all linear 0.5s;
    opacity:0;
}

.processed-hide {
    -webkit-transition:all linear 0.5s;
    -moz-transition:all linear 0.5s;
    -ms-transition:all linear 0.5s;
    -o-transition:all linear 0.5s;
    transition:all linear 0.5s;
    opacity:1;
}

.processed-hide-active {
    opacity:0;
}

.processed-show-active {
    opacity:1;
}

JavaScript

var App = angular.module('App', []);
App.run(function($rootScope) {
    $rootScope.cities = [
        {id: 'NM', name: 'Navi Mumbai'},
        {id: 'PN', name: 'Pune'}
    ];
    
    $rootScope.reflect = function() {
        if ($rootScope.same) {
            $rootScope.shipping_name = $rootScope.billing_name;
            $rootScope.shipping_address = $rootScope.billing_address;
            $rootScope.shipping_city = $rootScope.billing_city;
        }
    };
    
    // Dummy billing data
    $rootScope.billing_name = 'Amit Gharat';
    $rootScope.billing_address = 'Airoli';
    $rootScope.billing_city = $rootScope.cities[0];
    
    $rootScope.same = true;
    $rootScope.processed = false;
    
    // Dummy shipping data same as billing
    $rootScope.reflect();
    
    $rootScope.setProcessed = function() {
        $rootScope.processed = true;
        alert('called');
        setTimeOut(function() {
            $rootScope.processed = false;
        }, 2000);
    };
});