Question

请说明任何动画 以及如何连接模块动画

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());
}

Answer 1

首先使用AngularDart＆gt; = 0.9.9（验证你的pubspec.yaml）。

导入动画库：

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

然后将NgAnimate模块安装到您自己的模块中：

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

在CSS中定义一个基类（＆＃39;动画＆＃39;到下面的示例中），如下所示：

.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;
}

将此基类添加到DOM元素（您可以将其添加到具有ng-repeat指令的元素）：

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

在上面的示例中，postit是一个NgComponent但div也可以正常工作。

当一个元素被添加到列表中时，NgAnimate模块将添加＆＃39; .ng-enter＆＃39;到您的基础CSS类，如果它找到转换或关键帧，它将添加＆＃39; .ng-enter-active＆＃39;。最后它将删除这两个类。

希望它有所帮助。

如何在Angular Dart中制作动画？请告诉我

1 个答案: