Использование переменных в угловой анимации - PullRequest
Новая
       8

Использование переменных в угловой анимации

0 голосов
/ 02 мая 2018

Я хочу сделать анимацию, чтобы использовать переменную из компонента, а не жестко кодировать шестнадцатеричный цвет. Как мне это сделать? Я должен упомянуть, что мне это действительно нужно, потому что в будущем я хочу создавать случайные цвета, поэтому мне нужно получать эти цвета из переменной. Это мой код: 

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css'],
  animations: [
    trigger('heroState', [
      state('inactive', style({
        backgroundColor: '#eee'
        // transform: 'scale(1)'
      })),
      state('active',   style({
        backgroundColor: '#ff0000'
        // something like this
        // backgroundColor: this.color;
        // transform: 'scale(1.1)'
      })),
      transition('inactive => active', animate('100ms ease-in')),
      transition('active => inactive', animate('1000ms ease-out'))
    ])
  ]
})
export class DemoComponent implements OnInit {

  color:string = "#ff0000";

  inactive: boolean = false;

  constructor() { }

  ngOnInit() {
  }

  get stateName() {
    return this.inactive ? 'inactive' : 'active';
  }

  toggle() {
    this.inactive = !this.inactive;
  }
}
...