Repository navigation
CSS transform: translateX/translateY only takes a number, should take a percentage #3707
Description
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:
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)
- The blue box starts half way up and but the red box cannot be seen before the animation starts.
- They both animate to the top.
- 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.
Activity
tsonevn commentedon Feb 27, 2017
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
NativeScriptversions, 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 commentedon Aug 10, 2017
Sorry to neg, but any news on this, I could really use it soon.
tsonevn commentedon Aug 11, 2017
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 commentedon Jan 22, 2018
This feature is holding me back on a number of animations. Is there any updated timeline on this feature?
tsonevn commentedon Jan 22, 2018
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 commentedon Apr 16, 2018
I could really use this too, to animate a custom progress bar. +1
jscti commentedon Jan 30, 2020
Hi there from 2020 ..
alexandre-combemorel commentedon May 13, 2020
Happy to get an update and if there is any plan to support this in the future or not?
vallemar commentedon Jan 17, 2021
+1