Я пытаюсь связать переменную в моем угловом компоненте с переменной внутри ключевого кадра CSS, который я использую для динамической анимации div. Я столкнулся с HostBinding как с потенциальным решением, однако я (думаю) правильно следовал объявлению, но анимация не работает при использовании переменных. Я использую angular 10.0.14, любая помощь приветствуется.
Это мой код css:
@keyframes swap{
0%{background-color:red; left: var(--inX);}
100%{background-color: red; left: var(--finX);}
}
А вот это моя декларация HostBinding в component.ts:
@Component({
selector: 'app-',
templateUrl: './component.html',
styleUrls: ['./component.css'],
})
export class Component implements OnInit {
@HostBinding('style.--inX')
private inX: string = '100px';
@HostBinding('style.--finX')
private finX:string = '200px';
}
🤔 А знаете ли вы, что...
CSS Grid Layout предоставляет средства для создания сложных сеточных макетов, таких как магазины сеток.
теперь с css что-то не так, но хостинг меняет имя пользовательской переменной css с --inX на --in-x.
поэтому для решения просто измените пользовательское имя переменной css на одно слово или --in-x
})
export class AppComponent {
name = "Angular " + VERSION.major;
@HostBinding("style.--start")
private inX: string = "50px";
@HostBinding("style.--end")
private finX: string = "200px";
}
если вы хотите использовать стиль camelCase для имен переменных, вам нужно установить стиль непосредственно как объект, но я все же рекомендую предыдущее решение, потому что легко обновить одно свойство напрямую.
@HostBinding("style") private style = {
'--intX':'100px',
'--finX':'200px'
}