Nativescript: CSS transform: translateX/translateY only takes a number, should take a percentage

[m-abs]

Tell us about the problem

I'm trying to make an element of variable height slide up into view in our nativescript-angular project.
I'm animating with transform: translateY(100%) to translateY(0), e.g. sliding up form the bottom and on close back again.

The element doesn't start from the bottom, it looks like it only operates on numbers and not on percentage.
I can see in master the value of run through parseFloat here: https://github.com/NativeScript/NativeScript/blob/17610daa9a182fd999efb7c5b69a983015801b17/tns-core-modules/ui/styling/css-animation-parser.ts#L149
But we're running v2.5 and I couldn't figure out what happens to the value in this version.

Below you can see a the problem:

Both the blue and the red box have a fixed height of 200.
The blue box starts at translateY(100%).
The red box starts at translateY(200).
Both animates to translateY(0)

1. The blue box starts half way up and but the red box cannot be seen before the animation starts.
2. They both animate to the top.
3. Animating out again, the blue box stops halfway and the red box disappears out of the view.

According to http://docs.webplatform.org/css/functions/translateY/ it should take a percentage value.

Which platform(s) does your issue occur on?

Both

Please provide the following version numbers that your issue occurs with:

• CLI: 2.5.1
• Cross-platform modules: 2.5.1
• Runtime(s): 2.5.0

Please tell us how to recreate the issue in as much detail as possible.

Set the css-property transform to translateY(100%) and see elements taller than 100dp are still visible on the screen.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Code here: https://github.com/m-abs/tns-webpack-ng2.3/tree/css-translate-percentage

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[tsonevn]

Hi @m-abs,
Thank you for contacting us,

Indeed at the moment, percentages are not supported inside translate. In this case, 100% will be parsed as 100 dp.
This feature will be supported for some of the next NativeScript versions, unfortunately, I cannot commit to an exact time frame when this will be ready. You could also keep track on the issue for further info.

Regards,
@tsonevn

[m-abs]

Sorry to neg, but any news on this, I could really use it soon.

[tsonevn]

Hi @m-abs,

This feature is still under review, unfortunately, I could not commit to the exact time when this functionality will be available. At this time I could suggest keeping follow the issue for further info and about the progress.

[vultix]

This feature is holding me back on a number of animations. Is there any updated timeline on this feature?

[tsonevn]

Hi @vultix,
This feature is still under review and I could not commit to an exact date when it would be available.
However, any pull request, which provides support for this functionality, would be highly appreciated.
For further help, you could review our contribution guidelines.

[AdamDenoon]

I could really use this too, to animate a custom progress bar. +1

[jscti]

Hi there from 2020 ..

[sandwai-scottjackman]

This, along with not being able to calc() with relative values really restricts what you can do with layouts.

[alexandre-combemorel]

Happy to get an update and if there is any plan to support this in the future or not?