“Angular 2.0 for TypeScript”（alpha）动画是如何工作的？

Posted 2023-03-05

【中文标题】“Angular 2.0 for TypeScript”（alpha）动画是如何工作的？

【英文标题】：How does "Angular 2.0 for TypeScript" (alpha) animation work?

【发布时间】：2016-03-13 22:03:42

【问题描述】：

我是 Angular 领域的新手。我刚开始为 TypeScript 学习 Angular 2.0，我想知道动画（比如在带有 jQ​​uery 的简单 html 中）是如何在 Angular 2.0 中工作的

在 Angular 2.0 (angular.io > Features) 的主页中，您可以看到，在“Angular 2.0 for TypeScript”中有一种制作动画的方法。

在我的研究中，我发现了这样的事情： http://www.angular-dev.com/angular-connect-slides/#/26/0/

但我认为这只是一个普通的 javascript 代码。我不确定是否 ngAnimate 2.0 就是我要找的那个。

很遗憾，我找不到更多相关信息。

我想做的，很简单：

当我在一个简单的 div 容器中单击时，我希望出现另一个 div 容器（它在开始时是不可见的）。

在 jQuery 中，它会是这样的：http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_toggle

但我想要的是 TypeScript 中的这个动画。 你知道我是如何实现这个目标的吗？

提前感谢您的回答！

编辑 对不起，我忘了说，我到底想要什么。 我想使用切换，但类似于在 Windows 10 中：

当您按下“Windows + A”时，它会在右侧出现一个侧边栏。 当您单击 div 容器时，这正是我想要的网站动画效果，而不仅仅是简单的出现和消失。

我认为 jQuery 代码会是这样的（仅用于出现时间延迟）

$("divA").click(function() 
    $("divB").toggle(1000);
);

【参考方案1】：

对于您的简单“动画”，您只需要 ng-if:

<div (click)="showDiv2 = !showDiv2">toggle</div>
<div *ng-if="showDiv2">div 2</div>

顺便说一句，Angular 2 动画尚不可用。动画文档has landed。

【讨论】：

对不起，我忘了说，我到底想要什么。我想使用切换，但在 Windows 10 中类似：当你按下“Windows + A”时，它会在右侧出现一个侧边栏。当您单击 div 容器时，这正是我想要的网站上的动画，而不仅仅是简单的出现和消失。我认为 jQuery 代码会是这样的（仅用于出现时间延迟） $("divA").click(function() $("divB").toggle(1000); );那么，您认为 Angular 2.0 中有没有办法实现这种“侧边栏动画”？

@SyleKu，欢迎来到 ***。如您所见，明确您需要帮助的具体内容非常重要。我不知道有什么方法可以用当前版本的 Angular 2 做你想做的事。你必须做类似(click)="animateDiv2(div2, 1000)" 的事情，然后编写函数 animateDiv2() 来做 toggle() 所做的事情——我假设表示在指定的持续时间内修改 CSS 属性值。

【参考方案2】：

你可以使用 CSS，或者AnimationBuilder

对于 CSS 方式，您可以从他们的 repo 中检查这个 example，它完全符合您的要求。

使用AnimationBuilder，您可以模拟这样的相同行为

首先，您设置将按住按钮和 div 进行切换的模板

@Component(
  // Setting up some styles
  template: `
    <div animate-box #box="ab"  style="height:0; width:50%; overflow: hidden;">Some content</div>
    <button (click)="box.toggle(visible = !visible)">Animate</button>
  `,
  directives : [AnimateBox] // See class below
)

然后你创建将处理动画的指令

@Directive(
  selector : '[animate-box]',
  exportAs : 'ab' // Necessary, we export it and we can get its 'toggle' method in the template
)
class AnimateBox 
  constructor(private _ab: AnimationBuilder, private _e: ElementRef) 

  toggle(isVisible: boolean = false) 
    let animation = this._ab.css();
    animation
      .setDuration(1000); // Duration in ms

    // If is not visible, we make it slide down
    if(!isVisible) 

      animation
        // Set initial styles
        .setFromStyles(height: '0', width: '50%', overflow: 'hidden')
        // Set styles that will be added when the animation ends
        .setToStyles(height: '300px')
     
    // If is visible we make it slide up
    else 
      animation
        .setFromStyles(height: '300px', width: '50%')
        .setToStyles(height: '0')
    

    // We start the animation in the element, in this case the div
    animation.start(this._e.nativeElement);
  

参考

Animation API，超级简单，真的，真的很简单。

备注

这是一个临时 API，名为 ngAnimate 2.0 的新 API 尚不可用。但是你可以在@matsko 的AngularConnect - ngAnimate 2.0 的演讲中查看新内容。

这里有一个 plnkr 的复制品。

希望对你有帮助。

【讨论】：

这正是我想要的！我真的可以使用它。但是你能再帮我一次吗？您的解决方案是完美，但我还必须以另一种方式使用它：我的情况是我有设置许多 div 的 app2.ts。当我单击其中一个 div 时，应该会出现唯一 one 相同的“animation-div”。但是这个“animation-div”在 app.ts 中。我认为一个好的解决方案就是使用我正在使用的 EventEmitter （就像一个状态）。我的问题是：当调用 EventEmitter 的订阅函数时，如何从 app.ts 中的某个#box 调用切换函数？

我刚刚又做了一个决定。我现在正在使用 css 解决方案。这可能更容易。 AnimationBuilder 仍然是解决这个问题的好方法。

不懂toggle 函数。不应该是相反的吗：// If is visible, we make it slide up if(isVisible) animation // Set initial styles .setFromStyles(height: '0', width: '50%', overflow: 'hidden') // Set styles that will be added when the animation ends .setToStyles(height: '300px')？

重要！！：import AnimationBuilder from 'angular2/src/animate/animation_builder';，不要从angular2/animate导入它，因为它不起作用。

@eppsilon 只是这个 PR 介绍了 ngAnimate，但它正在进行中github.com/angular/angular/pull/7698