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

Question

此问题与相似，但不同之处足以创建一个新线程。

在处理 angular 2 animations 时，我不知道如何访问位于 [项目]\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，与相反，其目的是访问 TypeScript 中的 CSS 值。

有没有人回答，或者可以就此启发我？

Answer 1

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

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

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

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

css

sass

ionic2

angular2-animation

angular