According to this link, jQuery animation is much slower then css animation. Reason can be because jquery has to modify the props of the DOM element using timers and a loop. The CSS is part of the browser engine . which depends pretty much on hardware of system. You can also check that in profiling … Read more
Maybe transform: translateX() can provide a work-around. Depending on the circumstances, using transforms and the right property might be better: right: 10%; transform: translateX(-4rem); Here is a modified version of your script: http://jsfiddle.net/xV84Z/1/. Alternatively, while you can’t use calc() within a translateX() in IE (because of a bug), you can apply multiple translateX()s in a … Read more
It does work when you remove the display properties. #myelem { opacity: 0; transition: opacity 0.4s ease-in; -ms-transition: opacity 0.4s ease-in; -moz-transition: opacity 0.4s ease-in; -webkit-transition: opacity 0.4s ease-in; } #myelem.show { opacity: 1; transition: opacity 0.4s ease-out; -ms-transition: opacity 0.4s ease-out; -moz-transition: opacity 0.4s ease-out; -webkit-transition: opacity 0.4s ease-out; } JSFiddle. The reason for … Read more
display:none; removes a block from the page as if it were never there. A block cannot be partially displayed; it’s either there or it’s not. The same is true for visibility; you can’t expect a block to be half hidden which, by definition, would be visible! Fortunately, you can use opacity for fading effects instead. … Read more
Actually just add this to the site container which holds all the elements: -webkit-backface-visibility: hidden; Should fix it! Gino
If you want different CSS transition delays on hover and mouseout, you have to set them using the relevant selectors. In the example below, when an element is hovered, the initial delay on hover is 0 but on mouseout the transition is delayed by 1s. /* These transition properties apply on “mouseout” */ #bar { … Read more
At react conf 2015, Ryan Florence demonstrated using portals. Here’s how you can create a simple Portal component… var Portal = React.createClass({ render: () => null, portalElement: null, componentDidMount() { var p = this.props.portalId && document.getElementById(this.props.portalId); if (!p) { var p = document.createElement(‘div’); p.id = this.props.portalId; document.body.appendChild(p); } this.portalElement = p; this.componentDidUpdate(); }, componentWillUnmount() { … Read more
Use max-height in the transition and not height. And set a value on max-height to something bigger than your box will ever get. See JSFiddle demo provided by Chris Jordan in another answer here. #menu #list { max-height: 0; transition: max-height 0.15s ease-out; overflow: hidden; background: #d5d5d5; } #menu:hover #list { max-height: 500px; transition: max-height … Read more
You can animate the position (top, bottom, left, right) and then subtract the element’s width or height through a CSS transformation. Consider: $(‘.animate’).on(‘click’, function(){ $(this).toggleClass(“move”); }) .animate { height: 100px; width: 100px; background-color: #c00; transition: all 1s ease; position: absolute; cursor: pointer; font: 13px/100px sans-serif; color: white; text-align: center; } /* ↓ just to position … Read more
You forgot to define the default value for left so it doesn’t know how to animate. .test { left: 0; transition:left 1s linear; } See here: http://jsfiddle.net/shomz/yFy5n/5/