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;
}
}