FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

Animations: scale() syntax does not support only one argument · Issue #2834 · NativeScript/NativeScript · GitHub

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

Description

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugready for testTSC needs to test this and confirm against live production apps and automated test suites

    Type

    No type

    Projects

    No projects

      Milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions


      Back | FazBrowse Home | New Git URL