标签: angular-animations

我希望div使用css从角度2向右滑入.

  <div class="note" [ngClass]="{'transition':show}" *ngIf="show">
    <p> Notes</p>
  </div>
  <button class="btn btn-default" (click)="toggle(show)">Toggle</button>

如果我只使用[ngClass]切换类并使用不透明度,我工作正常.但是李不希望从一开始就渲染这个元素,所以我首先用ngIf"隐藏"它,但是转换不会起作用.

.transition{
  -webkit-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
  -moz-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
  -ms-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out ;
  -o-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
  transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
  margin-left: 1500px;
  width: 200px;
  opacity: 0;
}

.transition{
  opacity: 100;
  margin-left: 0;
}

使用新的Angular-Material版本,您需要为Angular-Animations添加模块.您可以在两个BrowserAnimationsModule和NoopAnimationsModule之间进行选择.在官方指南中指出:

某些Material组件依赖于Angular动画模块,以便能够执行更高级的过渡.如果您希望这些动画在您的应用中运行,则必须安装@ angular/animations模块并在应用中包含BrowserAnimationsModule.

npm install --save @angular/animations
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }

Run Code Online (Sandbox Code Playgroud)

如果您不想为项目添加其他依赖项,则可以使用NoopAnimationsModule.

import {NoopAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [NoopAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }

Run Code Online (Sandbox Code Playgroud)

我不太明白这里有什么区别.似乎完全一样:)两个模块之间有什么区别？

我一直想知道为什么我应该使用Angular动画而不是CSS动画.我发现在使用它们之前可能会考虑的几个方面:

性能

在第一步中,我发现这个问题只涉及性能方面.接受的答案对我来说并不令人满意,因为它声明应尽可能使用CSS动画,以便在单独的线程中运行动画的优化可以应用.这似乎不正确,因为Angular文档说明了这一点

角度动画构建于标准Web动画API之上,并在支持它的浏览器上本机运行.

(强调我的)

当我们查看Web Animations API Draft时,我们发现相同的优化可以应用于Web动画,而不是在工作表中指定的CSS.

虽然可以使用ECMAScript使用requestAnimationFrame [HTML]执行动画,但这些动画在声明动画方面的表现方式与它们在CSS级联中的表示方式以及可能的性能优化(例如在单独的线程上执行动画)有所不同.使用Web Animations编程接口,可以从脚本创建具有与声明性动画相同的行为和性能特征的动画.

(再次强调我的)

除了像IE这样的浏览器不支持Web动画,有没有理由使用CSS声明而不是Angular动画,反之亦然？我认为它们是可交换的性能.

更多地控制动画

这可能看起来像Angular动画的一个参数,因为你可以暂停动画或使用它等JS变量,但使用eg时也是如此.CSS animation-play-state: pause或使用JS中指定的CSS变量,请参阅文档.

现在我可以看到在JS代码中设置CSS变量可能不方便,但使用Angular动画时也是如此.这些通常在@Component animations字段中声明并且没有,除了通过动画状态数据绑定属性,访问实例字段(如果你AnimationBuilder当然不通过创建动画,btw也不是很方便或漂亮) .

另一点是,使用Web Animations API可以检查,调试或测试动画,但我不知道Angular动画是如何实现的.如果是的话,请你告诉我怎么样？如果不是这样的话,为了控制,我真的没有看到使用Angular动画而不是CSS的优势.

更清洁的代码

我在这里阅读了一个段落,说明将动画与"普通"样式分开实际上是行为和表现的分离.真的在样式表中声明动画混合了这些责任吗？我总是以另一种方式看到它,特别是在@Component动画中查看CSS规则让我感觉在一个太多的地方都有CSS声明.

那么Angular动画怎么样呢？

• 是否只是一种方便的工具,可以从其他样式中提取动画,还是带来任何有价值的功能？
• Angular动画的使用是否仅在特殊情况下得到回报,还是团队选择一直使用它的约定？

我很想知道使用Angular动画的实际优势.先谢谢你们!

什么是最小的和Angular4的本地方式滑入和滑出容器元素？

例如

<div ngIf="show">
    <!-- Content -->
</div>

当show变为true时,滑入内容(从上到下,就像jQuery.slideDown()).

当show变为false时,滑出内容(适当地具有缓出效果).

我正在尝试制作一个简单的动画,如下面的简单jQuery

animate({'left' : left_indent})

我正在使用Angular2动画,但问题是如何将我的Component Class外的left_indent参数传递给动画触发器？

animations: [
    trigger('flyInOut', [

        state('for', style({
            left: this.left_indent,
        })),

        transition('* => for', [
            animate(2000, keyframes([
                style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
                style({ opacity: 1, transform: 'translateX(-300px)', offset: 0.5 }),
            ]))
        ]),
    ])
]

我正在创建一个具有整页宽度/高度div的网页.向下滚动时我有两种方法.

滚动点击

//HTML
<a (click)="goToDiv('about')"></a>

//JS
    goToDiv(id) {
        let element = document.querySelector("#"+id);
        element.scrollIntoView(element);
      }

滚动HostListener

  @HostListener("window:scroll", ['$event'])
  onWindowScroll($event: any): void {
    this.topOffSet = window.pageYOffset;
    //window.scrollTo(0, this.topOffSet+662);
  }

1.如何添加滚动动画效果？

就像 :

$('.scroll').on('click', function(e) {
    $('html, body').animate({
        scrollTop: $(window).height()
    }, 1200);
});

2.如何使用HostListener滚动到下一个div？

我在angular2中使用webpack,当我尝试运行我的应用程序时,我得到一个错误说明

找不到模块"@ angular/animations"

的package.json

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation, supplemented with testing support",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
    "lint": "tslint ./app/**/*.ts -t verbose",
    "lite": "lite-server",
    "pree2e": "webdriver-manager update",
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
    "test-once": "tsc && karma start karma.conf.js --single-run",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": { …

我通过动画添加了一个动画

@Component({
   ....,
   animations: [
      trigger('slideIn', [
          ...
      ])
   ],
   host: {
      '[@animation]': 'condition'
   }
}

哪个运作良好,在编译时我被告知这已被弃用,我应该使用@HostBinding ......

@HostBinding('[@animation]') get slideIn() {
   return condition;
}

这让我错了

Can't bind to '[@animation' since it isn't a known property of 'my-component-selector'.

但我无法在我的模块中添加动画..我该怎么办？

从Angular 4.3.5迁移到4.3.6之后动画的东西变坏了(4.3.5就是一切都好).

问题是,当应用程序启动时,会加载登录组件,并且该组件fadeIn会显示动画.升级到最新的角度版本后,我的组件在加载应用程序后总是隐藏.我检查了登录组件,发现它已经style="display: none";应用了.

我正在使用外部animations.ts文件来存储我的所有动画.

animations.ts

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

// Fade In Animation
export const fadeIn = trigger('fadeIn', [
    transition('void => *', [
        style({ opacity: 0 }),
        animate(500, style({ opacity: 1 }))
    ])
]);

login.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { AuthenticationService } from '../../services/authentication.service';

import { fadeIn } from './../../shared/animations/animations';

@Component({
    moduleId: module.id,
    selector: 'app-authentication',
    templateUrl: './authentication.component.html',
    styleUrls: ['./authentication.component.css'], …

我有一个卡片组件,里面包含另一个不同的组件.它就像一个用于制作UI幻想的包装组件; 我想你已经多次看过这种方法了.

事实是,我希望这些卡片可以隐藏,只显示页脚(顺便说一下,它也是由子组件创建的,而不是卡本身).

因此,我处理动画的方法是:

1. 我点击图标,在可见和隐藏之间切换卡片.
2. 它输出(使用@Output())一些变量,该变量在子元素中用于隐藏您只想在卡被"激活"时显示的组件部分.
3. 这同一个变量在两个不同的动画使用:一个存储卡,为使它更小,并且在内部组件等,隐藏你不想显示当卡被"禁用"的一部分.

从实现开始,您可以看到这些小片段的大图:

<card [title]="'DATE SELECT'" class="col" (cardOpen)="config?.cardStatus['dateselect'] = $event">
   <date-picker-wrapper class="date-wrapper" [cardOpen]="config?.cardStatus['dateselect']" [config]="config" [dateranges]="dateranges" [doubleDateRange]="false">
   </date-picker-wrapper>
</card>

内部组件:

<div class="row margin upper-margin" [@animate]="cardOpen">
    // lots of code
</div>

父组件(卡):

@Component({
    selector: "card",
    styleUrls: ["./card.css"],
    template: `
    <div class="col card" [@animate]="enabled">
      <div class="row card-header">
        {{title}}
        <i (click)="switchVisibility()" class="fa fa-chevron-down icon-right"></i>
      </div>
      <ng-content></ng-content>

    </div>
    `,
    animations: [
      trigger('animate', [
        state('false', style({
          minHeight: "98px",
          height: "98px",
          maxHeight: "98px",

        })),
        state('true', style({
          minHeight: "270px",
          height: "270px",
          maxHeight: "270px" …