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
Related
I have an image carousel that you can scroll through with a 'next' and 'prev' button. The buttons are setting the positions state. The positions state is passed to the styled component and serves as an array of "transform: rotateY" properties of the child elements. A snippet with relevant code can be found here: https://codesandbox.io/s/hardcore-microservice-eylul?file=/src/App.js
My goal is to make the transitions of the images in the carousel smooth when the next and prev buttons are clicked.
Add the transition to your CarouselCell styled component :
transition: all 1s;
With the following rules:
.container[data-direction="reverse"] .pane[style*="display: none"]{
animation:SlideOutToRight 1s ease;
}
.container[data-direction="forward"] .pane[style*="display: none"]{
animation:SlideOutToLeft 1s ease;
}
The animation runs whenever (a) the data-direction attribute changes and (b) whenever the style becomes display:none. How can I change this code so that the animation only runs when the style becomes display:none but not when the data-direction attribute changes?
Right now, when the direction changes, all of the containers go flying across the screen to the other side because the animation gets applied to all of them when the data attribute changes value.
The data-direction attribute should only control which animation plays, but changes to it's value should not trigger the animation. Is this possible?
Update:
Here is a fiddle of the problem: https://jsfiddle.net/j6ytzbh6/
Expected behavior: The forward button should cause the next sequential box to enter from the right hand side while the current box exists left. The backward button should cause the previous sequential box to enter from the left while the current box exits right. No other box should move or cross the view-port when its not it's turn to move.
Reminder: This is a CSS question, so doing the animation in javascript is cheating. The idea is that Javascript controls functionality (ie a box should be shown or hidden) while css controls presentation (ie. do we make it disappear, fade out or fly to the side). You shouldn't have to re-write your plugin to change the visual way things get shown or hidden.
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.
In first excuse me for my bad english, I'm French. I'll do the best ! I'm here today because for the first time i don't find an answer to my problem. Monday i need to show a demo of a website and i start to panic !
So, I have a div with a rotate (45deg). Within this div, I have two div other div in inline-block (with a css rotate (-45deg). On the left i have a slider and on the right text and shortcuts. Today I joined the slider to the left position (I work on joomla). It works well but I have a problem with the slide transition. If I click "next" or "previous", the global div (the main container) becomes blurred for the duration of transition. I did screenshots of the text on the right position (best seen the difference).
Fiddle for example :
http://jsfiddle.net/asakuras/8Pk3S/11/
Pics for example :
Before click and just after the click, during the transition :
http://www.morgann-c.com/tools/js/bug.jpg
Explanations :
I tested many possibility to clean that but no solution at this time. In the script (responsiveslides.js) the transition's are reduction by the opacity. At the line 71 of the script there's the configuration of the opacity :
visible = {"float": "left", "position": "relative", "opacity": 1, "zIndex": 2},
hidden = {"float": "none", "position": "absolute", "opacity": 0, "zIndex": 1, }
If I change the opacity of the hidden class to 0 there's no transition but the bug disappears ! I think this is a problem with the CSS's opacity transition. If I delete the rotate on all the div's the bug also disappears. I tested all the CSS transform but no result ...
I'm working on this bug for 3 days and it's very important for me to find a solution quickly ...
I implore you, if someone has already had this problem i take !
Have a good week end and thank you by advance ...
EDIT //// :
Firefox 30 : "Blur" on click
Chrome 35.0.1916.153 : "Blur" everywhere on page load
IE 11 : No problems, no "blur", everything works perfectly !
First off, you were missing a - in -ms-transform (this is likely the reason why there is no blur in IE - it wasn't using transform)
Secondly, removing -webkit-backface-visibility made it so Chrome only blurs on the transition (I have no idea why you added it given nothing rotates at all).
Thirdly unless you're serving IE8- or something like that you don't need filter for the rotation and -o-transform and -moz-transform are not needed, so remove them
Lastly, the reason why it's blurry is because it's being rendered by the GPU. Though this does always happen when things are generated by the GPU, but I'm thinking that it is simply being overworked by the fact that there are two rotations and in addition to the opacity transition.
Thus, as a solution you have a few options. You can either remove the opacity transition, opting for something like margin-left:-600px (this requires changing the plugin to suit), you could move the header and paragraph outside of <div id="global"> but position it so that it's in the same position as it currently is (making sure none goes outside of the rotated square), or, my personal favorite choose another plugin! The one you're using is quite outdated and there are a lot better free ones just one Google search away
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)