Animations: scale() syntax does not support only one argument

[tjvantoll]

Please, provide the details below:

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?

Yes, I couldn’t find anything.

Tell us about the problem

Straight to the point—when writing CSS animation code in NativeScript...

This syntax works: transform: scale(1, 1)
This syntax doesn’t: transorm: scale(1)

The web supports providing a single value to scale() (see https://developer.mozilla.org/en-US/docs/Web/CSS/transform), so I think we should too. More specifically, our parser should see scale(1) and handle it like scale(1, 1).

Which platform(s) does your issue occur on?

Both

Please provide the following version numbers that your issue occurs with:

• CLI: 2.3.0
• Cross-platform modules: 2.3.0
• Runtime(s): 2.3.0
• Plugin(s): None

Please tell us how to recreate the issue in as much detail as possible.

tns create animation-test --ng
cd animation-test

Replace app/app.component.ts with the following code:

import { Component, trigger, state, transition, animate, style } from "@angular/core";

@Component({
  selector: "my-app",
  template: `
    <StackLayout>
      <Button text="Scale" [@state]="currentState ? 'active' : 'inactive' " (tap)="toggleState()"></Button>
    </StackLayout>
  `,
  animations: [
    trigger("state", [
      state("inactive", style({ transform: "scale(1)" })),
      state("active", style({ transform: "scale(2)" })),
      transition("inactive => active", [ animate("600ms ease-out") ]),
      transition("active => inactive", [ animate("600ms ease-out") ]),
    ])
  ]
})
export class AppComponent {
  public currentState: boolean;

  constructor() {
    this.currentState = false;
  }

  toggleState() {
    this.currentState = !this.currentState;
    console.log("toggling");
  }
}

Run the app and note how the button does not scale when you tap the button. Now replace scale(1) with scale(1, 1), and scale(2) with scale(2, 2) and note how the button scales as intended.

Thanks.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.