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

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 >= 0.9.9(验证到您的 pubspec.yaml)。

导入动画库:

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

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

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

像这样在 CSS 中定义一个基类(在下面的示例中为“动画”):

.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 模块会将“.ng-enter”添加到您的基本 CSS 类中，如果它找到过渡或关键帧，它将添加“.ng-enter-active”。最后，它将删除这两个类。

希望能帮助到你。