Question

我是一名初学程序员，最近我开始学习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层次结构的问题。如果有人知道问题可能是什么，请告诉我！

Answer 1

这可能是问题所在：

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

尝试不带括号的animate参数。

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

适合我。

Answer 2

如果你想改变整个身体，那么在定义你的身体的组件中写下动画：它不会改变你的jumbotron或footer所以你可以做的是使div覆盖整个屏幕，然后在那里应用你的触发器[@changeBodyColor]。

角度2+动画 - 改变身体元素的颜色

2 个答案: