【问题标题】:angular2 component transition animationangular2 组件过渡动画
【发布时间】:2017-11-08 02:31:16
【问题描述】:

angular2如何制作页面过渡动画?

我尝试这是代码但不起作用

@Component({
   selector:'myPagefirstPage', 
})

@View({
   template: `<div  class="view-animate ng-animate" > 
                 <h1>First Page</h1>
              </div>`

我把我的动画类放在这样的css文件中

.view-animate.ng-enter {....}

但它不起作用

【问题讨论】:

  • 我不确定动画是否已经实现,从 alpha 48 开始。无论如何,我假设你必须导入 ANIMATION_DIRECTIVES 或类似的东西才能在给定的情况下使用它们组件

标签: angular angular-animations


【解决方案1】:

从 beta 15 开始,基本转换使用例如.ng-enter.ng-enter-active 有效。请注意,您必须将 ng-animate 类添加到动画元素。有关示例,请参阅此 plunkr http://plnkr.co/edit/WcH3ndMN0HOnK2IwOCev?p=preview

但是,请注意,目前不支持 ng-leave,因为 DOM 节点在输出动画完成之前已被移除(请参阅 https://github.com/angular/angular/pull/6768

【讨论】:

    【解决方案2】:

    截至 2015 年 12 月,动画尚未在 Angular 2 测试版中实现,并在最终版本中到期。

    http://angularjs.blogspot.com.au/2015/12/angular-2-beta.html

    接下来会发生什么?

    我们已经在努力进行一系列改进以移动 Angular 2 到其完整和最终版本。虽然我们会做很多小 改进,final 的主要改进是:

    1. 减小 Angular 2 的负载大小。
    2. 使 Angular CLI 在整个开发过程中端到端可用。
    3. 为组件路由器创建对开发人员更友好的路由定义和链接 API。
    4. 支持动画。
    5. I18n 和 L10n 支持。

    编辑:动画现在在 - http://angularjs.blogspot.com.au/2016/06/rc2-now-available.html

    RC2 现已推出

    今天我们很高兴地宣布,我们正在发布 Angular 2.0.0-rc2。

    此版本包括:

    1. 动画框架

    ...

    【讨论】:

      【解决方案3】:

      对于至少使用 Angular 2.0.0-rc2 的用户,我们可以通过添加 div 来在我们的组件之间添加过渡动画(例如淡入淡出),像这样包装我们的组件视图:

      <div @fadeIn="'in'">
             ... Component HTML ...
      </div>
      

      在你的组件中我们必须设置动画fadeIn

      @Component({
          ...
          animations: [
              trigger('fadeIn', [
                  state('*', style({'opacity': '0'})),
                  transition('* => in', [animate('800ms linear', style({'opacity': '1'}))])
              ])
          ]
      

      [编辑]不使用状态的另一种方法如下:

      <div @fadeIn>
             ... Component HTML ...
      </div>
      

      还有组件:

      @Component({
          ...
          animations: [
              trigger('fadeIn', [
                  state('*', style({'opacity': 1})),
                  transition('void => *', [
                      style({'opacity': 0}),
                      animate('800ms linear')
                  ])
              ])
          ]
      

      【讨论】:

        【解决方案4】:

        Angular 2 最终解决方案

        正如@JeanMel 所说,我们可以使用@routeAnimation 内置指令来实现这一点。请参阅我的回答 here,其中包括一个笨蛋。

        【讨论】:

          【解决方案5】:

          对于页面转换,您可以依赖routeAnimation

          Animations.ts

          import {style, animate, transition, state, trigger} from '@angular/core';
          
          export default [
            trigger('routeAnimation', [
              state('*', style({opacity: 1, height: '100%'})),
              transition('void => *', [
                style({opacity: 0, height: '100%'}),
                animate(200)
              ]),
              transition('* => void', animate(0, style({opacity: 0, height: '100%'})))
            ])
          ];
          

          然后在你的YourComponent.ts

          import animations from './Animations';
          @Component({
            ...
            animations: animations
          })
          export class YourComponent {
            @HostBinding('@routeAnimation') public routeAnimation:void;
            ...
          }
          

          可选:假设您的 routing.ts 文件看起来像

          import {RouterModule}  from '@angular/router';
          import {ModuleWithProviders} from '@angular/core';
          import {YourComponent} from './YourComponent';
          
          export const routing:ModuleWithProviders = RouterModule.forChild([
            {path: "aPath", component: YourComponent}
          ]);
          

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 2016-12-29
            • 2018-06-30
            • 2018-02-28
            • 2020-07-25
            • 2016-01-30
            • 1970-01-01
            • 1970-01-01
            • 2016-07-31
            相关资源
            最近更新 更多