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

我在Angular场景中很新颖。我刚开始学习TypeScript的Angular 2.0，我想知道动画（如jQuery中的简单HTML）如何在Angular 2.0中工作。“Angular 2.0 for TypeScript”（alpha）动画是如何工作的？

在Angular 2.0的主页（angular.io> Features）中，您可以请参阅“有关TypeScript的Angular 2.0”中的动画方法。

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

但我认为这只是一次正常的JavaScript代码。我不确定ngAnimate 2.0是否是我正在寻找的。

不幸的是，我找不到有关这方面的信息。

我想要做什么，其实很简单：

当我点击只是一个简单的div容器，我希望出现另一个DIV容器（这是在开始unvisible）。

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

但我想，这是什么动画打字稿。你知道我如何达到这个目标吗？

感谢您的提前解答！

编辑对不起，我忘了提，我到底想要什么。我想使用切换，但在Windows 10中的东西：

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

我认为jQuery代码将是类似的东西（仅适用于时间延迟出现）

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

来源

2015-12-08 TheHeroOfTime

您可以使用CSS，或AnimationBuilder

对于CSS方式，您可以检查此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尚未公布。但是你可以通过AngularConnect - ngAnimate 2.0查看@ matsko的演讲中的新内容。

这里有一个摄制一个plnkr。

我希望它有帮助。

来源

2015-12-09 04:26:38

这正是我想要的！我真的可以使用它。但你能帮我多做一次吗？您的解决方案是完美的** **，但我也有另一种方式来使用它：我的情况是，我有** ** app2.ts它设置许多的div。当我点击其中一个div时，应该出现唯一的**一个**相同的“animation-div”。但是这个“animation-div”在** app.ts **中。我认为一个好的解决方案就是使用我正在使用的EventEmitter（就像一个状态）。我的问题是：当从EventEmitter的订阅功能被调用时，我怎么能调用从app.ts一定#box切换功能？ – TheHeroOfTime

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

不理解'toggle'功能。不应该是相反的：'//如果是可见的，我们使它向上滑动 if（isVisible）{ 动画 //设置初始样式。setFromStyles（{height：'0'，width：'50％'，overflow：'hidden'}） //设置动画结束时添加的样式 .setToStyles（{height：'300px'}）'？ – Miquel

为您简单的 “动画” 你只需要NG-IF：

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

~~顺便提一下，Angular 2动画还没有发布。~~ 动画文档has landed。

来源

2015-12-08 20:56:52

对不起，我忘了提，我到底想要什么。我想在Windows 10使用切换按钮，但类似：当您按下“视窗+ A”，它会出现在右侧的侧边栏。正是我想要的网站上的动画，当你点击一个div容器，而不仅仅是简单的出现和消失。。我认为jQuery代码将是类似的东西（仅适用于时间延迟出现） $（ “DIVA”）点击（函数（）{ $（ “DIVB”）切换（1000）; }）; 那么，你觉得有没有在角2.0的方式来达到这个“侧边栏动画”？ – TheHeroOfTime

@SyleKu，欢迎来到StackOverflow。正如你所看到的，明确你需要什么帮助是非常重要的。我不知道有什么办法可以用你当前版本的Angular 2来做你想做的事。你必须做一些事情，比如'（click）=“animateDiv2（div2，1000）”'，然后编写函数animateDiv2（）做什么切换（）做 - 我假设意味着在指定的时间内修改CSS属性值。 –

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

回答

相关问题