Angular 2动画中的动画子元素答案

【问题标题】：Animate child element in Angular 2 animationAngular 2动画中的动画子元素
【发布时间】：2017-01-04 20:02:30
【问题描述】：

这是我的模板

<div class="navbarTitle" [@myTrigger]='state' (mouseenter)='animateUnderscore()'>Hello<span class="titleUnderscore">_</span>Everyone</div>

如您所见，div 中有一个 span 元素，其中包含 Hello 和 Everyone 文本之间的下划线。

我的组件中切换文本颜色的方法（动画是使用组件装饰器中定义的角度动画完成的）

//** Within component
titleIsBlue: boolean = false;

//method which changes the color of the underscore on hover
animateUnderscore = () => {
    if (this.titleIsBlue) {
        state = 'black';
        titleIsBlue = false;
    } else {
        titleIsBlue = true;
        state = 'blue';
    }

}
//** Within Component

如何获取包含下划线的span 元素，以便更改它的颜色？

我不想使用 jQuery 或 Angular2 的 elementRef。

【问题讨论】：

标签： angular angular2-animation

【解决方案1】：

根据您想要更改的属性，您可以使用例如[style.color] 绑定来更改文本颜色：

<div class="navbarTitle" [@myTrigger]="state" (mouseenter)="animateUnderscore()">
   Hello
   <span class="titleUnderscore" [style.color]="underscoreColor">_</span>
   Everyone
</div>

然后你必须在你的类中定义这个属性：

titleIsBlue: boolean = false;
underscoreColor: string = '#000';    

//method which changes the color of the underscore on hover
animateUnderscore = () => {
    if (this.titleIsBlue) {
        this.state = 'black';
        this.titleIsBlue = false;
        this.underscoreColor = '#F00';
    } else {
        this.titleIsBlue = true;
        this.state = 'blue';
        this.underscoreColor = '#00F';
    }
}

小便，请在模板中使用双引号以防止解析错误:)

【讨论】：

我知道修复很简单，但没有耐心去想更多。非常感谢。