标签: angular2-animation

我正在使用动画API,我想创建一个可重复使用的动画,比如说在顶级路由器视图的内容中滑动.我设法通过时髦的元数据语法(实际上非​​常酷,一旦超过使用元数据的疯狂想法)来使动画主要工作.

   @Component({
      //moduleId: module.id,
      selector: 'album-display',
      templateUrl: './albumDisplay.html',
      animations: [
        trigger('slideIn', [
          state('*', style({
            transform: 'translateX(100%)',
          })),
          state('in', style({
            transform: 'translateX(0)',
          })),
          state('out',   style({
            transform: 'translateX(-100%)',
          })),
          transition('* => in', animate('600ms ease-in')),
          transition('in => out', animate('600ms ease-in'))
        ])
      ]
  })
  export class AlbumDisplay implements OnInit {
      slideInState = 'in';
      ...
  }

然后将其分配给组件中的顶级元素:

  <div  class="container" [@slideIn]="slideInState">

所以这有效,但我怎样才能使这个可重用？我不想将这些元数据粘贴到每个视图上.由于这是元数据,我不确定如何使这个可重用.

我正在尝试使用angular2的动画,我想知道它们对标准css动画/过渡有什么特别的优势.

例如,典型的材料设计卡和悬停效果与框阴影.大多数css框架使用:hover和css-transitions.使用角度2动画有特别的优势吗？

我在某处读到某些css动画属性并没有调用GPU那么多,因此有一些延迟和滞后.angular2动画怎么样？

我试图触发绑定到布尔属性的转换,但这似乎没有触发.

这是我的动画触发器的缩减版本

trigger(
  'trueFalseAnimation', [
    transition('* => true', [
      style({backgroundColor: '#00f7ad'}),
      animate('2500ms', style({backgroundColor: '#fff'}))
    ]),
    transition('* => false', [
      style({backgroundColor: '#ff0000'}),
      animate('2500ms', style({backgroundColor: '#fff'}))
    ])
  ]
)

HTML:

<div [@trueFalseAnimation]="model.someProperty">Content here</div>

去测试:

ngOnInit() {

    setTimeout(() => {
        this.model.someProperty = true;
        setTimeOut(() => {
            this.model.someProperty = false;
        }, 5000);    
    }, 1000)
}

someProperty更改时,触发器永远不会发生.

作为一个快速测试我更改了触发器以使用字符串,它的工作原理

trigger(
      'trueFalseAnimation', [
        transition('* => Success', [
          style({backgroundColor: '#00f7ad'}),
          animate('2500ms', style({backgroundColor: '#fff'}))
        ]),
        transition('* => Failed', [
          style({backgroundColor: '#ff0000'}),
          animate('2500ms', style({backgroundColor: '#fff'}))
        ])
      ]
    )

去测试: …

该@Component注释为我们提供了一个animations属性.这可以用来定义列表triggers每个很多state和transition性能.

将多个动画添加到组件时,此列表可能会变得很长.此外,一些动画也非常适合在其他组件中使用.必须将它们直接放在每个组件中似乎很乏味且重复 - 而且它违反了DRY原则.

您也可以在组件上定义模板和样式属性,但在这里您可以选择提供templateUrl和styleUrls替换.我似乎无法找到一个animationUrls属性 - 我错过了什么 - 有没有办法做到这一点？

:enter第一次渲染组件时,动画将应用于元素.有没有办法防止它？

检查此plunker以获取width动画的简单示例:

transition(':enter', [
  style({width: 0}),
  animate(250, style({width: '*'})),
]),

我正在使用版本4.1.3的角度动画

以下是代码:

@Component({
  selector : 'my-fader',
  animations: [
    trigger('visibilityChanged', [
      state('true' , style({ opacity: 1, transform: 'scale(1.0)' })),
      state('false', style({ opacity: 0, transform: 'scale(0.0)'  })),
      transition('1 => 0', animate('300ms')),
      transition('0 => 1', animate('900ms'))
    ])
  ]
...

现在,而不是状态中的样式我想给现有的类名,即使用样式表中定义的类(即非内联样式)

那可能吗？如果是这样请帮助.

我需要两种颜色之间的过渡OnClick.现在,这是我的代码:

打字稿

animations: [
    trigger('menubarState', [
        state('false', style({backgroundColor:'#43a047'})),
        state('true', style({backgroundColor:'#333'})),
        transition('false => true', animate('1s')),
        transition('true => false', animate('1s'))
    ])
]

...

export class MenubarComponent {
  menuActive: boolean = false;
  onMenuClick () {
    if (this.menuActive == false) {
      this.menuActive = true;
    } else {
      this.menuActive = false;
    }
  }
}

HTML

<li [@menubarState]="menuActive" (click)="onMenuClick()">
      <a><span class="material-icons icon">apps</span></a>
</li>

这确实改变了background-color它应该.然而,这种变化是即时的,而不是过渡.

我使用的是Chrome,最新版本.

我想用 Angular2 动画显示和隐藏我的模态组件。目前这是我的代码：

animations: [
    trigger('modalState', [
      state('true', style({
        display: 'block',
        opacity: '1'
      })),
      state('false',   style({
        display: 'none',
        opacity: '0'
      })),
      transition('* => *', animate('200ms ease'))
    ])
  ]

问题：目前显示块在 200ms 后设置。所以你看不到动画不透明度。显示应在事件后直接设置。

这该怎么做？

我正在使用Angular 4 Animations在按钮上测试一个简单的淡入/淡出动画.我遇到的问题是因为我使用布尔值没有触发任何东西.从开发工具看起来,类似于.ng-animating添加到元素中,但没有任何更改.

这是我的代码示例:

@Component({
    selector: 'fade-btn-test',
    styles: [
        require('./fade-btn-test.component.scss')
    ],
    template: `
        <button [@test]="isActive" (click)="isActive = !isActive">My Button</button>
    `,
    animations: [
        trigger('test', [
            state('true', style({ opacity: 0 })),
            state('false', style({ opacity: 1 })),
            transition('0 <=> 1', animate(500))
        ])
    ]
})

export class FadeBtnTestComponent {
    isActive: boolean = false;
}

我知道上面的代码曾用于Angular 2,但是在这种情况下它不起作用.我发现的唯一解决方案是使用a string而不是a boolean.

@Component({
    selector: 'fade-btn-test',
    styles: [
        require('./fade-btn-test.component.scss')
    ],
    template: `
        <button [@test]="isActive.toString()" (click)="isActive = !isActive">My Button</button>
    `,
    animations: [
        trigger('test', [
            state('true', style({ …

我想在一个组件中定义多个动画触发器.这可能吗？

例如,一个用于进入场景,一个用于悬停.或者我是否需要为此案例定义两个组件(父子组件)？

item.compoennt.ts

// removed the import and class part for better readability

@Component({
  selector: 'item',
  templateUrl: './item.template.html',
  styleUrls: ['./item.style.scss'],
  animations: [
    // page load animation 
    trigger('slideIn', [
        state('in', style({
            opacity: 1,
            transform: 'translateY(0)'
        })),
        transition('void => *', [
            style({
                transform: 'translateY(100%)',
                opacity: 0
            }),
            animate('0.5s 100ms ease-in')
      ])
    ]),


    // <--- this fails
    // hover animation
    trigger('fadeIn', [
      state('over', style({
            opacity: 1
        })),
        transition('void => *', [
            style({
                opacity: 0
            }),
            animate('0.5s 100ms ease-in')
    ])
  ],
})

item.template.html

<div …