Hi,
I’m trying to do an animation that moves an item 100px along from it’s current position each time a button is clicked.
I setup a custom animation using keyframes { “0” { top:0px}, “100” { top:100px}}, which as expected moves the item from 0px to 100px.
So I tried the css3 technique of using translateY to do what I wanted:
"0": { "transform": "translateY(0px)" }, "100": { "transform": "translateY(100px)" }
but this does nothing.
Is translateY supported ?
Am I using the wrong keyword (“transform”) to use it ?
Failing the above, are there any other ways I could get an object to move from it’s current position by 100px each time ?
Currently the only thing that I can think of is to manually rewrite the animation json into the CustomAnimations property each time.
Thanks for you help
Andi
Yes translates adds an offset. So if the top is 50px and you use translateY 50px the element will be at 100px. I attached an example using two techniques, one using the animation and the the using css.
Remember that translate doesn’t change the location value, so if you want to keep moving it you have to update the location as I did in the example.
I thought that “transform: translateY(50px)” moved the item down by 50px rather than moving it to 50px, which is how it differs to using “top: 50px” which explicitly sets the top position, which is why I wanted to use it instead of “top:”. Is this not the case ?
If I’m mistaken then fair enough.
I did end up modifying the script in code to achieve what I wanted, but assuming the above statement is correct it’d be far more elegant not to have to do this, instead allowing some kind of access to the transforms other than via the abstracted “top”, “left”, etc…
Andi
I updated the sample (attached here) with a second method using the css transition style. For simple animations the transition style is perfect. It will animate the change of most css properties. The animation extender with the keyFrames can perform really complex animations. You can use one of the keyframe designers available online and convert the css to json: http://cssanimate.com/
The updated sample now have a second button a second animated panel. You’ll see that the second panel doesn’t use the animation extender at all and just the action of changing the Top location results in an animation. It’s done by setting the class name to a css style like this “transition: top 1s”. https://www.w3schools.com/css/css3_transitions.asp
The syntax using CSS is different than the syntax using JSON in Wisej. It should be:
@keyframes mymove {
0% {transform: translateY(0px);}
100% {transform: translateY(100px);}
}
https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
Once you have the CSS animation defined you can use animation-name: mymove. This is how plain CSS works with animations.
Wisej compiles the JSON definition into CSS for browsers that support keyframes and into javascript for browsers that don’t. It also adds a simple mustache.js replacement for {[x}}, {{y}}, {{width}}, {{height}}, {{right}}, {{bottom}} when the custom animation has the template:true property.
The problem with what you want to do is that the position will restart from 0px while, IIUC, you want to increase the position by 100px on each click but after the animation is terminated. Currently the Animation component in Wisej doesn’t have a feedback event to detect when the animation is terminated to you’d have to update the top position of the target on the next click.
See attached sample.
Please login first to submit.
