Skip to content

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

Closed

Description

@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.

Activity

  1. self-assigned this
    on Oct 24, 2016
  2. added
    ready for testTSC needs to test this and confirm against live production apps and automated test suites
    and removed on Oct 24, 2016
  3. modified the milestones: 2.5.0, 2.4.0 on Nov 9, 2016
  4. lock commented on Aug 29, 2019

    @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.

  5. locked and limited conversation to collaborators on Aug 29, 2019
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