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.
Related
So I have this code :
https://codesandbox.io/s/beautiful-driscoll-jvvvvs?file=/src/Picker.tsx
And I am trying to create a slide-down animation on click of the Selector but it doesn't work , however if you were to add an opacity and corresponding transition for example it works perfectly fine. Some suggestions? ( tried with both height , max-height , even display none ? 0.o )
The thing is you can't display DOM nodes and transition them in the same frame.
If you'd want to animate anything, you should render the DOM nodes first, and then trigger the animation/transition.
Or you can render the DOM nodes at all times, and then just animate them.
If edited your Example to always render the DOM elements and just trigger the animation (you can also remove the opacity transition if you want to, or delay the opacity transition by using the transition delay). If you want me to elaborate more about how to remove the transition effect, leave a comment :)
https://codesandbox.io/s/zealous-cache-lb6yd9
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
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
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 am drawing an image inside panel and slider field using ExtJS 4. I want to change opacity of image whenever of value of slider field changes.
I am aware that opacity and filter:alpha(opacity=); rule of CSS can be applied to image which will change its opacity.
However I do not know how to apply this css rule to the image. Can anyone please guide me on this?
You can use Ext.dom.Element.setOpacity method:
Ext.fly('image-id').setOpacity(0.5); // this will make img with id 'image-id' become half-transparent
Here is live demo
Update
If you are using Ext.Img component you will have to do something like the following:
imgCmp.getEl().setOpacity(0.5);