Repository navigation
Animating "transform" with Angular causes element to disappear #3937
Description
Did you verify this is a real problem by searching [Stack Overflow]
I have searched extensively to find a lead, but considering Angular 4 support got released 7 days ago I suspect this is a new thing.
Tell us about the problem
When using Angular 4 component animations system, animating transform property causes the element disappear/not render at all. Doing the same animation in CSS works. Below I have provided test cases where the element does render, and where it doesn't.
Which platform(s) does your issue occur on?
Android (I can only test in Android emulator in Windows atm)
Please provide the following version numbers that your issue occurs with:
- CLI: 2.5.3
- Cross-platform modules: 2.5.2
- Runtime(s): Android: 2.5.0 (again only can test with Android)
- Plugin(s):
"dependencies": {
"@angular/animations": "4.0.0",
"@angular/common": "4.0.0",
"@angular/compiler": "4.0.0",
"@angular/core": "4.0.0",
"@angular/forms": "4.0.0",
"@angular/http": "4.0.0",
"@angular/platform-browser": "4.0.0",
"@angular/platform-browser-dynamic": "4.0.0",
"@angular/router": "4.0.0",
"nativescript-angular": "1.5.1",
"nativescript-audio": "^3.3.0",
"nativescript-theme-core": "~1.0.2",
"reflect-metadata": "~0.1.8",
"rxjs": "~5.2.0",
"tns-core-modules": "2.5.2",
"zone.js": "~0.8.2"
},
"devDependencies": {
"babel-traverse": "6.4.5",
"babel-types": "6.4.5",
"babylon": "6.4.5",
"lazy": "1.0.11",
"nativescript-dev-android-snapshot": "^0..",
"nativescript-dev-sass": "^0.4.2",
"nativescript-dev-typescript": "~0.3.5",
"typescript": "~2.1.0"
}
Please tell us how to recreate the issue in as much detail as possible.
See the stand-alone component example I have created below. In short, including transform: 'scale(1,1)' in the styles in the animation state is a sure way to make the element to disappear. But eg. translateX or rotate can also cause it in some cases, so I'm including all my findings to help track it down.
Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.
'translateX' in initial state: wont render the element at all
import {trigger, style, animate, state, transition } from "@angular/animations";
import {Component} from "@angular/core";
@Component({
selector: "animation-states",
template: `
<stack-layout>
<Button class="btn" text="Touch me!" [@state]=" isOn ? 'active' : 'inactive' " (tap)="onTap()"></Button>
</stack-layout>`,
animations: [
trigger("state", [
state("inactive", style({ backgroundColor: "blue", transform: "translateX(0px)"})),
state("active", style({ backgroundColor: "red", transform: "translateX(100px)"})),
transition('inactive => active', animate('600ms ease-in-out'))
])
],
styles: [
`.btn {
/*transform: translateX(0px) scale(2);*/
}`
]
})
export class AnimationStatesTest {
isOn = false;
onTap() {
this.isOn = !this.isOn;
}
}
'translateX' ONLY in second state: renders the element and animates
import {trigger, style, animate, state, transition } from "@angular/animations";
import {Component} from "@angular/core";
@Component({
selector: "animation-states",
template: `
<stack-layout>
<Button class="btn" text="Touch me!" [@state]=" isOn ? 'active' : 'inactive' " (tap)="onTap()"></Button>
</stack-layout>`,
animations: [
trigger("state", [
state("inactive", style({ backgroundColor: "blue"})),
state("active", style({ backgroundColor: "red", transform: "translateX(100px)"})),
transition('inactive => active', animate('600ms ease-in-out'))
])
],
styles: [
`.btn {
/*transform: translateX(0px) scale(2);*/
}`
]
})
export class AnimationStatesTest {
isOn = false;
onTap() {
this.isOn = !this.isOn;
}
}
'rotate' does not suffer from the same problem, but...
import {trigger, style, animate, state, transition } from "@angular/animations";
import {Component} from "@angular/core";
@Component({
selector: "animation-states",
template: `
<stack-layout>
<Button class="btn" text="Touch me!" [@state]=" isOn ? 'active' : 'inactive' " (tap)="onTap()"></Button>
</stack-layout>`,
animations: [
trigger("state", [
state("inactive", style({ backgroundColor: "blue", transform: "rotate(0deg)"})),
state("active", style({ backgroundColor: "red", transform: "rotate(90deg)"})),
transition('inactive => active', animate('600ms ease-in-out'))
])
],
styles: [
`.btn {
/*transform: translateX(0px) scale(2);*/
}`
]
})
export class AnimationStatesTest {
isOn = false;
onTap() {
this.isOn = !this.isOn;
}
}
...'scale' refuses to work in any way, even when it works in CSS and already has scaling from there
Click the button, and the backgroundColor animates, and then the element disappears.
import {trigger, style, animate, state, transition } from "@angular/animations";
import {Component} from "@angular/core";
@Component({
selector: "animation-states",
template: `
<stack-layout>
<Button class="btn" text="Touch me!" [@state]=" isOn ? 'active' : 'inactive' " (tap)="onTap()"></Button>
</stack-layout>`,
animations: [
trigger("state", [
state("inactive", style({ backgroundColor: "blue"})),
state("active", style({ backgroundColor: "red", transform: "scale(3,3)"})),
transition('inactive => active', animate('600ms ease-in-out'))
])
],
styles: [
`.btn {
transform: scale(2,2);
}`
]
})
export class AnimationStatesTest {
isOn = false;
onTap() {
this.isOn = !this.isOn;
}
}
Activity
skycaptainskycaptain commentedon Apr 4, 2017
Well I found the reason it fails, without a doubt. The pic shows how the parser fails with "scale(1,1)", splitting the value at the comma. And since TRANSFORM_MATCHER is looking for a value in parentheses, it comes out empty handed.
I verified that everything works if I hack the last line in the parseStyle like this, and give only single value, eg "scale(2)":
Now I wonder if I should look into the actual source and make a pull request.
skycaptainskycaptain commentedon Apr 4, 2017
...and now I realize this should be posted to nativescript-angular...argh. Sorry.
NickIliev commentedon Apr 5, 2017
Closing as duplicate and related to NativeScript/nativescript-angular#738
Please continue the discussion of this issue in the new thread.
lock commentedon Aug 28, 2019
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.