Skip to content

[4.0.0-rc.3]: Animations easing not working at all #15115

Description

@basmilius

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
Easing doesn't work. I'm using cubic-bezier in my angular app, but i get a linear ease.

Expected behavior
That easing works just like ng2.

Minimal reproduction of the problem with instructions
http://embed.plnkr.co/G8JdPc8f9hQcA9OGCO6k/

@Component({
	animations: [
		trigger("drawerOpened", [
			state("yes", style({ display: "block", transform: "translate3d(0, 0, 0)" })),
			state("no-left", style({ display: "none", transform: "translate3d(-100%, 0, 0)" })),
			state("no-right", style({ display: "none", transform: "translate3d(100%, 0, 0)" })),
			transition("* => yes", animate("240ms cubic-bezier(0.0,0.0,0.2,1.0)")),
			transition("yes => *", animate("240ms cubic-bezier(0.4,0.0,1.0,1.0)"))
		])
	],
	selector: "id-navigation-drawer",
	templateUrl: "./navigation-drawer.component.html",
	styleUrls: ["./navigation-drawer.component.scss"]
})

What is the motivation / use case for changing the behavior?
It worked in ng2.

Please tell us about your environment:
Windows, PHPStorm Public Preview and @angular/cli for serving to Google Chrome.

  • Angular version: 4.0.0-rc.3
  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  • Language: [all | TypeScript X.X | ES6/7 | ES5]

  • Node (for AoT issues): node --version =

Metadata

Metadata

Assignees

Labels

area: animationslegacy animations package only. Otherwise use area: core.regressionIndicates than the issue relates to something that worked in a previous versiontype: bug/fix

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions