Angular 2 动画中的动画子元素

Question

这是我的模板

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

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

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

//** 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。

Answer 1

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

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

在您的 class 中，您必须定义此属性然后：

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';
    }
}

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

Angular 2 动画中的动画子元素

Animate child element in Angular 2 animation

angular

angular2-animation