1

我正在尝试将我的角度组件中的变量绑定到 CSS 关键帧内的变量，我正在使用该变量动态地为 div 设置动画。我遇到HostBinding了一个潜在的解决方案，但是我（认为）我正确地遵循了声明，但是在使用变量时动画不起作用。我正在使用 angular 10.0.14 任何帮助表示赞赏。

这是我的 CSS 代码：

@keyframes swap{
  0%{background-color:red; left: var(--inX);} 
  100%{background-color: red; left: var(--finX);}
}

这是我的 component.ts HostBinding 声明：

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

1 回答 1

0

现在 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";
}

stackblitz 演示

如果您想将camelCase样式用于变量名称，您需要将样式直接设置为对象，但我仍然推荐以前的解决方案，因为它很容易直接更新单个属性。

  @HostBinding("style")  private style = {
    '--intX':'100px',
    '--finX':'200px'
  }

stackblitz 演示

于 2020-12-22T01:44:11.770 回答