标签: angular-animations

我正在显示高度和宽度为 600px 的 mat-dialog。

我在垫子对话框中有一个按钮。当我单击按钮时，我想从 mat-dialog 的左侧显示左滑动 div，而不影响 mat-dialog。

我怎样才能做到这一点？

我正在尝试以 Angular 方式进行动画回调，但出现了类型错误，可以使用 type 轻松抑制该错误any。我想了解为什么AnimationEvent打字稿不接受。

我的组件：

import { Component } from '@angular/core';
import { animate, state, style, transition, trigger } from "@angular/animations";

@Component({
  selector: 'app-animation-callback',
  animations: [
    trigger('openClose', [
      state('open', style({
        height: '200px',
      })),
      state('closed', style({
        height: '100px',
      })),
      transition('open <=> closed', [
        animate('.1s')
      ]),
    ]),
  ],
  template: `
    <nav>
      <button (click)="toggle()">Toggle</button>
    </nav>

    <div
      [@openClose]="isOpen ? 'open' : 'closed'"
      (@openClose.start)="onAnimationEvent($event)"
      (@openClose.done)="onAnimationEvent($event)"
      class="open-close-container">
      Text
    </div>
  `,
})
export class AnimationCallbackComponent {
  isOpen = true;
  toggle() {
    this.isOpen …

基本上,我想在角度(当前为4)中使用web-animations-api polyfill来对元素执行无限动画.

让我们看一个基本的非角度示例:

var ball = document.getElementById('ball');

ball.animate([
  { transform: 'scale(0.5)' },
  { transform: 'scale(1)' }
], {
  duration: 1000,
  iterations: Infinity,
  direction: 'alternate',
  easing: 'ease-in-out'
});

.container {
  position: relative;
  width: 100%;
  height: 200px;
}

.ball {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid #E57373;
  background: #F06292;
  box-shadow: 0px 0px 15px #F06292;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js"></script>
<div class="container">
  <div class="ball" id="ball"><div>
</div>

我如何将其翻译成Angular？

这是我到目前为止尝试过但只运行一次:

animations: [ …

trigger('expandCollapse', [
            state('open', style({
                'height': '*'
            })),
            state('close', style({
                'height': '0px'
            })),
            transition('open <=> close', animate(1000))
        ])

使用此代码为展开塌陷动画，展开塌陷效果很好，但使用角动画框架4.3.1时没有高度动画

https://plnkr.co/edit/tY4z1QPvdKMeU6M82cTF?p=preview

为此创建了一个小演示

我正在开发一个 Angular 响应式应用程序，它在移动设备上有一个抽屉。

我喜欢 Angular 中的 Web Animations API 实现，但我找不到可以根据媒体查询断点配置动画的地方。

我所能找到的只是通过我的 css 表取消动画，但这让我开始在我的项目中的不同地方传播代码，而且我不确定这是我想要做的 angular ......

现实生活中的例子

我的应用程序抽屉使用此代码制作动画

<div class="mobile-menu" [@animateDrawer]="drawerOpened">
  <!-- Drawer's menu goes here -->
</div>

drawerOpened 是一个布尔值，当应用菜单按钮被按下时切换。

我的组件看起来像这样：

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  animations: [
    trigger('animateDrawer', [
      state('inactive', style({
        transform: 'translate3d(-100%, 0, 0)'
      })),
      state('active', style({
        transform: 'translate3d(0, 0, 0)'
      }))
    ])
  ]
})

我取消动画效果的CSS 代码

.mobile-menu {
  opacity: 1 !important;
  display: flex !important;
  transform: none !important;
}

除了在我的 css 代码中操作所有内容并禁用 Desktop BreakPoint …

我很困惑。style()a 里面的函数有什么区别state()

state('inactive', style({
   backgroundColor: '#eee',
   transform: 'scale(1)'
 })),

和style()里面的一个函数transition()

 transition('inactive => *', [
    style({ transform: 'scale3d(.3, .3, .3)' }),
    animate(100)
 ]),

和style()里面的一个函数animation()

 animate(100, style({ transform: 'scale3d(.0, .0, .0)' }))

我想在angular 4应用中为图像交换设置动画。当控制器替换img src属性时，旧图像应消失并出现新图像。

在AngularJS中，可以通过使用ng-animate-swap更改不透明度来实现。但是，Angular 4似乎不支持动画交换。没有交换触发器如何实现？

我尝试为src属性添加从void到*的过渡，然后又添加回来，但这并没有按预期工作。第一个图像是有动画的，后来交换是在没有动画的情况下发生的。

@Component({
  selector: 'app-play-card',
  template: '<div (click)="loadImg()"><img [@fade]="imgsrc" src="{{ imgsrc }}" /></div>',
  styleUrls: ['./play-card.component.css'],
  animations: [
    trigger('fade', [
      transition('void => *', [
        style({opacity: 0.1}),
        animate(5000, style({opacity: 1}))
      ]),
      transition('* => void', [
        style({opacity: 0.9}),
        animate(5000, style({opacity: 0}))
      ])
    ])
  ]
})

我正在使用Angular处理Electron应用程序,主页面应该显示从JSON文件异步加载的项目列表.

它们加载和动画很好,但为了交错动画,我调用了角度动画的查询功能.

不幸的是,这个查询返回零元素,尽管他们几乎立即成功加载了正确的动画(只是没有交错).

我怀疑这与在加载数据之前触发查询有关,但我不知道我能做些什么来解决这个问题.

相关代码包含在下面.

HTML:

<div [@itemList]="itemService.items.length">
  <div class="item-card" *ngFor="let item of itemService.items | 
  async;">
  </div>
</div>

零件:

@Component({
    selector: 'app-notes-list',
    templateUrl: './notes-list.component.html',
    styleUrls: ['./notes-list.component.css'],
    animations: [
        trigger('items', [
            transition(':enter', [
                style({ transform: 'scale(0.5)', opacity: 0 }),  // initial
                animate('1s cubic-bezier(.8, -0.6, 0.2, 1.5)',
                    style({ transform: 'scale(1)', opacity: 1 }))  // final
            ]),
            transition(':leave', [
                style({ transform: 'scale(1)', opacity: 1, height: '*' }),
                animate('1s cubic-bezier(.8, -0.6, 0.2, 1.5)',
                    style({
                        transform: 'scale(0.5)', opacity: 0,
                        height: '0px', margin: '0px'
                    }))
            ]) …

我已将我的项目从角度5.2.9升级到角度6.0.0-rc.5.

除了在包路径中几乎没有快速的RxJS修复,所有看起来都很好.(此链接非常有用:想要将项目从Angular 5升级到Angular 6)

但是,由于某些原因,我在@ angular/core模块中遇到了AnimationEntryMetadata的问题.

我正在导入:

import {AnimationEntryMetadata} from '@angular/core';

为了创建动画.但现在我收到以下错误:

模块../node_modules/@angular/core/core"'没有导出的成员'AnimationEntryMetadata'

有没有人遇到过这个问题呢？

我比较了两个版本之间的两个@ angular/core文件并发现了一些更改(每个版本标记为不同颜色),您可以看到新版本中缺少"AnimationEntryMetadata":

此动画在页面加载时有效，但我需要在单击按钮时为该图像设置动画

<div [@fadeInDownOnEnter]="'true'">
    <img src="https://www.seoclerk.com/pics/556744-1wYpi51504622425.jpg" alt="animatepic">
</div>
<button (click)="animate()">Animate it</button>

在 component.ts 文件中

import { fadeInDownOnEnterAnimation } from 'angular-animations';
@Component({
  animations: [
    fadeInDownOnEnterAnimation()
  ]
})


//method 
animate(){
  //what should I do here
}