Basically, I have an element with a given width and height. When I add the "zoomed" class to it, I want it to change its size and position. I got it working with a proper webkit-animation (keyframed).
The problem is that when I remove the "zoomed" class, it suddenly reverts to the original size and position, and I'd love to do it with an animation.
Note that this is an example that could probably be solved with the use of the transition property, but in my real world case, it can't because I have a fairly complex keyframed animation.
So, how to have a basic state, animate to a new state when a class is added and reverse the animation to the basic state when the class is removed? Thanks.
The problem that you have wouldn't be solved with a transition.
What makes a transition work in both ways is that usually you set it in a class, and change properties in an state. This way, you have the transition set all the time, and only change the properties.
If you set the transition in the changed state only, once you remove it, the transition is no longer in the element, and so the change is immediate.
If adding the class is really the procedure that you want (for some other reason), the you have 3 posibilities
As suggested in the comment, in the change to the basic state you should add another class that has as only property the animation playing in reverse.
In the base element set the animation in reverse, in the added class set the animation.
Go to an elaborate system where you really remove the class in the animation end event, and what you do triggers that (way too complicated I think)
There is no way that the element is animated - transitioned - whatever once you remove that from the element
Related
When I close that expanding box, I would like the other list items to transition smoothly back to their original position and not jump like they are doing now. How can I achieve that, I have no idea how to tackle this problem.
Edit: The Listitems are an array of Components. The Expandable is toggled with an OnClickEvent, which changes a bool in the state and a conditional rendering quote, like this:
{this.state.expanded && <div> Expandable </div>
I got it to work the way I wanted by animating the height of the Expandable window. Just for future reference I am using the React CSSTransitionGroup to animate that Expandable.
Here is the result:
Still have to do some fine tuning though
If someone else finds a better solution though feel free to post it, since I learned you should try to avoid to animate any property, but: opacity, scale, position and rotation
I'm writing a "3D navigation" where moving the mouse cursor subtlely rotates the contents of the screen. When something is clicked I want it to zoom (scale).
The rotation is achieved with transform property, and evoked when the cursor moves. This part works fine!
Now I want the scale to be animated at 500ms. But if I set this transition speed, it wrecks the nice smoothness of the cursor move property.
I tried solving with JavaScirpt, but the problem is that if I start working the "scale" segment alone, it overwrites the rotation property. CSS doesn't remember that I've set the rotation at some point, if I set transform again, during animation, with only the scale.
I have a work-around, but I don't think it's very nice and I suspect it will difficult to understand and refactor it in the future.
So like I can separate the timing for "background" and "color", is there a way to "go deeper", and also separate for the different transform properties?
Thanks in advance!
I'm building an interface with React, and I'd like to get the properties of div container (clientWidth and clientHeight) after I changed a class.
The main problem is that there is a CSS transition of 0.2s for the width/height properties, so whenever I try to detect a (future) DOM modification thanks to React (with componentDidMount) or with a MutationObserver, I'm getting the clientWidth and clientHeight right before the transition starts.
Ideally, I'd like to get the properties that are about to be applied after the transition so I could re-render sub-components and give them the future width/height they need.
Is there any good way to do this?
I thank you in advance :)
You can write a trigger for css transition end: https://davidwalsh.name/css-animation-callback
So you can wait with the height and width detection till this event is triggered.
A lot of people need to restart their CSS3 animations; Well I want the exact opposite:
If I start an animation by adding the proper css class, the animation starts; If I then sort my container using a series of parentNode.insertBefore calls (and reusing the very same node instances), the animations restart every time.
Is there anything I can do to prevent this behavior?
Here's a fiddle showing this behavior: http://jsfiddle.net/v66G5/17/
Click on Add all, let the animation plays for a few seconds then click shuffle: Any node that moved has its animation restarted.
container.insertBefore(node, childrenClone[Math.floor(Math.random() * childrenClone.length)]);
Why manipulate DOM elements, when you can shuffle their CSS positions instead?
http://jsfiddle.net/v66G5/19/
children.each(function() {
var $node = $(this),
$node2 = $(children[Math.floor(Math.random() * children.length)]),
tmp = $node.position().top;
$node.css("top", $node2.position().top + 'px');
$node2.css("top", tmp + 'px');
});
Taking from http://dev.w3.org/csswg/css3-animations/
An animation specified on an element by modifying the style after the document has loaded will start when the style is resolved. That may be immediately in the case of a pseudo style rule such as hover, or may be when the scripting engine returns control to the browser (in the case of style applied by script).
An animation applies to an element if the element has a value for ‘animation-name’ that references a valid keyframes rule. Once an animation has started it continues until it ends or the ‘animation-name’ is removed. The values used for the keyframes and animation properties are snapshotted at the time the animation starts. Changing them during the execution of the animation has no effect
Removing and inserting nodes causes the elements to recalculate the style, so I don't think what you want is possible by simple css.
A possible way to achieve it using jQuery, would be to take a snapshot of opacity and time left till the end of animation when removing the node, and setting it back after inserting it (ie. for 10s animation, after 5s if shuffle was clicked, start from 50% opacity, with the duration of the animation at 5s)
I want to introduce a canvas component by zooming from a height & width of 0.0 to 1.0. I want the component to be invisible until the zoom begins and then for it to be visible when it begins zooming.
However, if I bind the zoom effect to a showEffect trigger on the component and then make the component visible, it will first show the component at its regular size for a split second before it begins the zoom effect. If I combine the zoom effect and setting the component visible together in a parallel, it will also flash the component at its regular size for a split second before the zoom. If I make the component visible when the zoom effect starts through its effectStart event, it still does it. Does anyone know how to make it visible only when the zoom effect begins so that it doesn't flash the component at its regular size for a split second before the zoom effect?
It'd be easier to provide suggestions if you were giving us code.
That said, the reason the component "Flashes" at full size before the effect starts probably relates to the positioning and sizing of the component before the effect starts. So, before you start the effect just set the height and width of the component to the zoomHeightFrom and zoomWidthFrom of the effect.
These things can be tricky to debug, though. Especially without code.
Found an easy solution: Put the zoom effect and set property action, which sets the component to visible, in a Parallel together but add a nominal start delay of 50 ms to the set property action.