Please, provide the details below:
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.
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 seescale(1)and handle it likescale(1, 1).Which platform(s) does your issue occur on?
Both
Please provide the following version numbers that your issue occurs with:
Please tell us how to recreate the issue in as much detail as possible.
Replace
app/app.component.tswith the following code:Run the app and note how the button does not scale when you tap the button. Now replace
scale(1)withscale(1, 1), andscale(2)withscale(2, 2)and note how the button scales as intended.Thanks.