CODEWITHSUNDEEP
dartangular-dart
logosan
logosan

Reputation: 11

How to make animation in Angular Dart? Please tell me

Illustrate any animation please And how to connect the module animation

import 'package:angular/angular.dart';
import '../library/main_сontroller/main_contoller.dart';
import '../component/reg_avt/reg_avt_component.dart';
import '../component/record_book/record_book.dart';

class MyAppModule extends Module {
  MyAppModule() {
    type(MainController);
    type(RegAvt);
    type(RecordBookComponent);
  }
}

main() {
  ngBootstrap(module: new MyAppModule());
}

Upvotes: 1

Views: 1722

Answers (1)

Eric Taix
Eric Taix

Reputation: 908

First use AngularDart >= 0.9.9 (verify into your pubspec.yaml).

Import the animate library:

import 'package:angular/animate/module.dart';

Then install NgAnimate module into your own module: 

  var module = new Module()
    ..install(new NgAnimateModule())
    ..type(YourControler)

Define a base class ('animate' into the example below) into your CSS like this:

.animate.ng-leave {
  opacity: 1;
  transition: opacity 1s;
}
.animate.ng-leave.ng-leave-active {
   opacity: 0;
}
.animate.ng-enter {
   opacity: 0;
   transition: opacity 1s;
}
.animate.ng-enter-active {
   opacity: 1;
}

Add this base class to a DOM element (you can add it to a element which has a ng-repeat directive):

 <div class="animate" ng-repeat="postit in retro.postItList | filter: {category: 0}">
    <postit text="postit.text"></postit>
 </div>

In the example above, postit is a NgComponent but a div works fine too.

When a element will be added to the list, NgAnimate module will add '.ng-enter' to your base CSS class and if it find an transition or keyframe, it will then add '.ng-enter-active'. At the end it will remove both classes.

Hope it helps.

Upvotes: 1

Related Questions