/angular-animate-less-mixins

As set of less mixins for angular's animation support built on Bootstrap's css animation mixins.

Primary LanguageCSSApache License 2.0Apache-2.0

Angular Animate LESS Mixins

As set of LESS mixins for angular's animation support built on Bootstrap's css animation mixins.

Project Status

I am no longer working on projects which are using Angular for the UI. If you are interested in contributing fixes or making updates to the project feel free to open an issue and we can get in touch.

Motivation

To have a set of LESS Mixins to make it easier to create the classes necessary to leverage angular's animation support.

Usage

The easiest way to use Bootstrap Big Grid is with Bower

bower install --save angular-animate-less-mixins

Alternatively download a release and import mixins.

Example

LESS

@import "bower_components/bootstrap/less/mixins";
@import 'bower_components/angular-animate-less-mixins/dist/less/angular-animate-less-mixins';
.testing-opacity {
  .testing {
    .transition(all linear 1s);
  }
  .testing-if {
    .testing {
      .ng-animate-if-opacity(0, 1);
    }
  }
  .testing-class {
    .testing {
      .ng-animate-class-opacity(0, 1);
    }
  }
  .testing-hide,
  .testing-show {
    .testing {
      .ng-animate-hide-opacity(0, 1);
    }
  }
}

HTML

<div class="testing-opacity">
  <div>
    <div class="testing-if">
      <input type="checkbox" ng-model="testing.opacity.if"/>
      <div class="testing" ng-if="testing.opacity.if">Testing if</div>
    </div>
  </div>
  <div>
    <div class="testing-class">
      <input type="checkbox" ng-model="testing.opacity.class"/>
      <div class="testing" ng-class="{ 'new-class' : testing.opacity.class }">Testing class</div>
    </div>
  </div>
  <div>
    <div class="testing-show">
      <input type="checkbox" ng-model="testing.opacity.show"/>
      <div class="testing" ng-show="testing.opacity.show">Testing show</div>
    </div>
  </div>
  <div>
    <div class="testing-hide">
      <input type="checkbox" ng-model="testing.opacity.hide"/>
      <div class="testing" ng-hide="testing.opacity.hide">Testing hide</div>
    </div>
  </div>
</div>

JavaScript

'use strict';

angular.module('angularAnimateLessMixins', ['ngAnimate'])
  .controller('AngularAnimateLessMixinsCtrl', ['$scope', function($scope) {
    $scope.testing = {
      opacity: {
        if: false,
        class: false,
        show: false,
        hide: false
      },
    };
  }]);

Project Status

Unfortunately I no longer work on UI projects and as such I don't have the time required to keep this project always up to date with the latest version of angular. If you'd like, feel free to fork the repo and start making improvments.

Thanks for your understanding.