Ionic 2 动画（使用 Angular2）=> 来自 variable.scss 的颜色，“无法在“元素”上执行“动画”：不支持部分关键帧

Posted 2023-03-13

【中文标题】Ionic 2 动画（使用 Angular2）=> 来自 variable.scss 的颜色，“无法在“元素”上执行“动画”：不支持部分关键帧

【英文标题】：Ionic 2 animations (with Angular2) => colors from variable.scss, `Failed to execute 'animate' on 'Element': Partial keyframes are not supported

【发布时间】：2017-04-25 19:06:33

【问题描述】：

这个问题类似于this one，但不同之处足以创建一个新线程。

在处理 angular 2 animations 时，我不知道如何访问位于 [project]\src\theme\variable.scss 中的颜色变量。

假设 [project]\src\theme\variable.scss 上面有这个：

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  ...
);

现在在 Ionic 2/Angular 2 组件中，在 @Component 注释中，我有类似的东西：

animations: [
     trigger('changeBackgroundColor', [
        state('active', style(
            backgroundColor: [Some statement to define the active color]
        )),
        state('inactive', style(
            backgroundColor: '#32db64' 
        )),
        transition('* => inactive', animate('800ms ease')),
        transition('* => active', animate('800ms ease')),
        transition('inactive=> active', animate('800ms ease')),
        transition('active=> inactive', animate('800ms ease')),
    ]),
 ]

现在我尝试了以下方法在[Some statement to define color active]字段中设置背景颜色：

'#387ef5' => 有效；

'($colors,primary)' => 不工作 'color($colors,primary)' =>不工作 'primary' => 不工作

每次它不起作用时，它都会抛出错误：Failed to execute 'animate' on 'Element': Partial keyframes are not supported.;

我很惊讶我无法访问“variable.scss”中的变量，因为定义backgroundColor 的语句嵌入在style() 语句中。我想象可以使用 style() 常规 CSS，这与 the other topic I refer to 不同，后者的目的是访问 TypeScript 中的 CSS 值。

有没有人回答，或者可以告诉我这个？

【参考方案1】：

您不能直接在 javascript 中访问 SCSS 变量。每当您运行构建过程时，SCSS 脚本都会被编译成 CSS，并且变量不会被维护，而是在整个脚本中替换为它们的实际值。

如果您想访问变量的值，您可以将不可见元素添加到具有类的 DOM 中，这会使它们的颜色成为某个 SCSS 变量，例如 $primary，然后在 Javascript 中访问这些值。但这是一个丑陋的解决方法。