2

我是一名初级程序员，最近开始学习 Angular 4。我正在尝试制作个人网站并想添加一些动画。

在页面的顶部，我有一个带有徽标的大屏幕。我希望这样当我单击此徽标时，主体的背景颜色会发生变化，但似乎该功能会触发元素。

这是我在 TypeScript 上的代码：（代码不会产生错误。它只是没有做我打算做的事情。）

@Component({
    selector: 'main-jumbotron',
    templateUrl: './jumbotron.component.html',
    styleUrls: ['./jumbotron.component.css'],
    animations: [
      trigger("changeBodyColor", [
        state('off', style({
            backgroundColor: '#CCFFCC'
        })),
        state('on', style({
            backgroundColor: '#3A3A38'
        })),
        transition('off => on', [animate('2s')]),
        transition('on => off', [animate('2s')])
      ])
    ]
})
export class JumbotronComponent implements OnInit {
     // other private instance data, constructor here, ngOnInit etc.

    colorState: string = 'off';
        toggleColor() {
            console.log('triggered ' + this.colorState);
            this.colorState = (this.colorState === 'off') ? 'on' : 'off';
    }
}

当我将 [@changeBodyColor]="colorState" 放在 jumbotron 的 div 元素中时，动画可以工作，但显然只是改变了 jumbotron 背景颜色。当我将它放在 index.html 中的 body 元素上时，会触发该功能（登录控制台），但颜色不会改变。

我觉得这是 DOM 层次结构的问题。如果有人知道问题可能是什么，请告诉我！

4

2 回答 2

2

这可能是问题所在：

transition('off => on', [animate('2s')]),
transition('on => off', [animate('2s')])

尝试不带括号的动画参数。

transition('off => on', animate('500ms')),
transition('on => off ', animate('500ms'))

为我工作。

于 2017-08-21T14:38:53.397 回答
0

如果要更改整个身体，请编写动画：在定义身体的组件中。它不会改变你的大屏幕或页脚，所以你可以做的是用覆盖整个屏幕的属性制作 div，然后在那里应用你的触发器 [@changeBodyColor]。

于 2017-06-09T08:00:29.220 回答