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

【问题标题】：Ionic 2 animations (with Angular2) => colors from variable.scss, `Failed to execute 'animate' on 'Element': Partial keyframes are not supportedIonic 2 动画（使用 Angular2）=> 来自 variable.scss 的颜色，“无法在“元素”上执行“动画”：不支持部分关键帧
【发布时间】：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 值。

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

【问题讨论】：

标签： css angular sass ionic2 angular2-animation

【解决方案1】：

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

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

【讨论】：