I am trying to hide a div with an animation on some action. My initial pass at it looked as follows:
.row {
height: 50px;
transition: height 200ms ease-in-out;
&.hidden {
height: 0;
}
}
Where my DOM structure was as follows (with react):
<div className={styles.container}>
<div className={styles.row} />
<div className={classnames(styles.row, { [styles.hidden]: !this.state.active })}
</div>
While this did work, it was very slow. I have heard that transforms are efficient to transition in CSS, so I decided to try the following instead.
.row {
height: 50px;
transform-origin: top;
transition: transform 200ms ease-in-out;
&.hidden {
transform: scaleY(0);
}
}
However, within the container, the second row is still displaying as a 50px box, but the inspector says that it has 0 height.
How can this transform be correctly applied to hide the second box?
3D transforms are efficient because the browser will composite the targeted elements into their own layers and offload the animations to the GPU. height and even scaleY() are not 3D transformations and do not benefit from GPU acceleration (the CPU still handles it).
To go back to your example with height, you can force the browser to use GPU acceleration by tricking it with a fake transform property like transform: translateZ(0); (translateZ() is the 3D component of translate3d(), much like scaleZ() is the 3D component of scale3d()).
Here's a quick demo:
document.querySelector('button').addEventListener('click', function() {
document.querySelector('.row').classList.toggle('hidden');
});
.row {
background-color: green;
height: 50px;
overflow: hidden;
transition: height 200ms ease-in-out;
transform: translateZ(0); /* or translate3d(0,0,0), rotateZ(360deg), etc. */
}
.row.hidden {
height: 0;
}
button {
left: 0;
position: absolute;
top: 100px;
}
<div class="row">Some text</div>
<button>Toggle Row Visibility</button>
With the added property, the browser should utilize GPU acceleration, significantly improving the animation. See this question for more information related to transforms and GPU acceleration.
I would recommend trying this first to see if it speeds up the animation enough in your app. You could alternatively try adding the will-change property though this is part of a working draft and currently non-standard.
I'm really struggling trying to create smooth CSS transitions in Safari. I'm trying to hide/show divs by changing their height with a JavaScript onclick event. The resulting transitions are nice and smooth with Chrome, Firefox, and Edge. However with Safari it just looks bad and must be around 15 fps when rendering.
A basic JSFiddle is here: https://jsfiddle.net/q5a9b62s/6/
The website I'm working on is here: http://www.allinimages.ch/
Thanks.
You could try using JavaScript to add a className to you div like this:
function grow() {
var element = document.getElementById("boxid");
if (!element.className) {
element.className = 'tall';
} else {
element.className = '';
}
};
I've added the nullification of the className to enable toggling of the animation.
Then, let CSS processing do all of the transforming for you:
#boxid {
background-color: red;
width: 50px;
height: 50px;
position: relative;
-webkit-transition: height 0.3s ease;
transition: height 0.3s ease;
}
#boxid.tall {
height: 500px;
-webkit-transition: height 0.3s ease;
transition: height 0.3s ease;
transform: translate3d(100) /* this property ensures GPU processing cross-browser */
}
Codepen example is here.
Great article on smooth CSS transitions is here.
Some issues for cross-browser use of translate3d are documented here.
I've been working on a custom context menu for a table on one of my views in an angular app. The idea is to display a hidden, absolutely-position div on right click of any particular row in this table.
I think the event is returning the correct clientX and clientY, but where I'm running into trouble is when I try to position this hidden div to the coordinates of the right-click event. What I'm using, right now, is this:
$('.toggled-options-status-change').css({
top: event.clientX,
left: event.clientY
}).show();
where .toggled-options-status-change is the class name of the hidden div.
What's basically happening is that the div is being position is seeming random spots, so it can't simply be fixed by decremented the top and left positions be constant values.
It's hard for me to tell what's going on, and I wish I could share a fiddle or something with you guys. What I'm hoping is that someone has come across an issue like this before and knows a direction to go and investigate further.
Edit - CSS
.toggled-options-status-change {
position: absolute;
display: none;
}
.off-canvas-wrap {
-webkit-backface-visibility: hidden;
position: relative;
width: 100%;
overflow: hidden;
.inner-wrap {
-webkit-backface-visibility: hidden;
position: relative;
width: 100%;
-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
-ms-transition: -ms-transform 500ms ease;
-o-transition: -o-transform 500ms ease;
transition: transform 500ms ease;
}
Edit - HTML
relevant html outline:
<html>
<body>
<div class="off-canvas-wrap">
<div class="inner-wrap">
<div ng-view>
...
</div>
</div>
</div>
</body>
</html>
Almost always with these sorts of things, for me at least, the answer is exceedingly simple and makes me look like a fool for missing it the first time around. Oh well, it's nice to figure it out regardless.
top should be clientY, not clientX, and vice versa. omg
I want to bypass CSS transition and change a property instantly.
I tried to set transition-duration to 0s before the change and then set transition-duration back to its original value:
$('div').css('width', '200px').delay(1000).queue(function() {
$(this).css({
transitionDuration: '0s',
msTransitionDuration: '0s',
mozTransitionDuration: '0s',
webkitTransitionDuration: '0s',
oTransitionDuration:'0s'
}).css('width', '10px').css({
transitionDuration: '2s',
msTransitionDuration: '2s',
mozTransitionDuration: '2s',
webkitTransitionDuration: '2s',
oTransitionDuration:'2s'
})
})
Fiddle
This obviously doesn't work.
I understand that the spec does not define that behavior for this:
Since this specification does not define when computed values change,
and thus what changes to computed values are considered simultaneous,
authors should be aware that changing any of the transition properties
a small amount of time after making a change that might transition can
result in behavior that varies between implementations, since the
changes might be considered simultaneous in some implementations but
not others.
Is there an easy way to do this?
Note: The property I am changing is transform so .animate() would not be an option.
Since nobody else is posting a valid answer, here goes:
$('div').css('width', '200px').delay(1000).queue(function() {
$(this).css({transition: '0s', width: '10px'}).delay(1).queue(function() {
$(this).css({transition:'2s'});
});
},1000);
FIDDLE
Or if it's the other way:
$('div').css({
transition: '0s'
}).css('width', '200px').delay(1000).queue(function() {
$(this).css({width: '10px', transition: '2s'});
});
FIDDLE
jQuery should normalize vendor prefixes these days, so you don't have to type them all yourself.
The issue here is that jQuery attaches all the styles at once, only keeping the last styles, overwriting the previous styles of the same CSS property without ever doing a repaint of the DOM, and testing with native javascript seems to be doing the same thing, so it's probably the browser trying to avoid uneccessary reflows by adding a style just to have it changed in the next line of code, so doing:
$('div').css({
transition: '0s',
width: 200
}).css({
transition: '3s',
width: 10
});
won't work as only the last style is added.
This is where delay() comes into play, the OP's question was already using delay() so there was no reason not to use it, but removing delay() will of course cause the above issue, where the browser doesn't paint the first style, but only the last etc.
As delay() is really just a fancy timeout, it effectively defers the execution of the second setting of the styles, causing two browser repaints.
As this is most likely a browser issue, and not something we can change, deferring the setting of the second style is the only way to make this work, and using a delay will still work even if it's set to just 1 milliseconds, or one could defer the execution with a regular timeout, which is the usual way to defer execution of a script:
$('div').css({
transition: '0s',
width: 200
});
setTimeout(function() {
$('div').css({
transition: '3s',
width: 10
});
});
FIDDLE
The above will work just fine, as the timeout causes the first setting of the style to be painted by the browser, and defers the setting of the style inside the timeout to a later time, but as no time is set, it's executed as soon as the browser can (but still deferred until after the current script has completed), which for the human eye would seem like immediately, and that solves the issue.
Set up an override class that would disable css transitions on an element applied to, !important is perfect for this:
.notransition {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}
You can now toggleClass to switch the desired behaviour (smooth transition vs instant change):
$('div').
toggleClass('notransition', true). //or false!
css('width', '200px');
Fiddled. IMO one of the advantages of this approach is that you have clear separation between default element styling and the disable all smooth animations flag. This is also a very "wrappable" reusable approach, i.e. you can easily add an optional boolean property to your existing methods that would indicate whether or not it should be executed with transitions.
NB: sometimes you may want to disable transitions on the page altogether for whatever performance/UX reasons. In that case, you can change the selector to .notransition * and disable transition on all descendant elements.
If you have control of the CSS
The easiest thing to do is tie the animation to some class, and then at what point you want the animation to no longer be bypassed, you add the class, otherwise no animation is ever set. If the reverse, you generally want the animation, but occasionally want to bypass it, then add the class by default and remove it at time of bypassing.
Example CSS
div{
height: 100px;
width: 200px;
background: red;
}
div.doTransition {
width: 10px;
transition: width 2s linear;
-ms-transition: width 2s linear;
-moz-transition: width 2s linear;
-webkit-transition: width 2s linear;
-o-transition: width 2s linear;
}
See fiddle which creates a click event to start animation when it is desired, but this could be some other programmatic trigger to add the class at the time that one no longer wants to bypass it. This fiddle does the opposite, it assumes the animation is present, but on page load immediately bypasses it by removing the class.
The issue is that, since there is no reason for the browser to slow down and execute each operation seperately, it combines them and does both at the same time. Querying offsetHeight is one way to force it to do each operation seperately, as it has to recalculate the height. http://jsfiddle.net/markasoftware/6cTeY/15/ works perfectly
This is the only way I could make it work. jQuery seems to be a bit stubborn.
http://fiddle.jshell.net/8qTpe/1/
P.S. There are some errors in your approach:
You are re-sizing to 200px before the delay, thus using the default CSS settings.
You are re-sizing to 10px before the change of the transition back to 2s.
Now jQuery seems to apply all CSS settings in a row so that's why the whole thing does not seem to work.
I'd go for a rather clean CSS solution
HTML
<div id="foo"></div>
<button class="out">out</button>
<button class="in">in</button>
JS
$('button.out').click(function(){console.log($('#foo').addClass);$('#foo').addClass('out')})
$('button.in').click(function(){$('#foo').removeClass('out')})
CSS
div{
height: 100px;
width: 10px;
background: red;
transition: width 0s linear;
-ms-transition: width 0s linear;
-moz-transition: width 0s linear;
-webkit-transition: width 0s linear;
-o-transition: width 0s linear;
}
div.out {
width: 200px;
transition: width 2s linear;
-ms-transition: width 2s linear;
-moz-transition: width 2s linear;
-webkit-transition: width 2s linear;
-o-transition: width 2s linear;
}
http://jsfiddle.net/6cTeY/19/
I usually do it in this vanilla JS fashion.
FIDDLE
HTML
Suppose you have an element
<div id="element"></div>
CSS
Suppose your element has CSS Transitions already active and background: green
#element {
background: green;
width: 200px;
height: 200px;
-webkit-transition: 'all 0.5s ease-out';
-moz-transition: 'all 0.5s ease-out';
-ms-transition: 'all 0.5s ease-out';
-o-transition: 'all 0.5s ease-out';
}
JS
The element has CSS transitions but we want to change the element's background to BLUE, instantly.
Right after that, we want the element's normal behaviour to return so we can animate it's background to RED.
We need to shut off transitions for a moment and restore them right after.
// grab the element
var element = document.getElementById('element');
// removeTransitions
element.style.webkitTransition = 'none';
element.style.mozTransition = 'none';
element.style.msTransition = 'none';
element.style.oTransition = 'none';
// apply desired 'instant' property
element.style.background = 'blue'; // is applied instantly
// this 10ms timeout is necessary for the transitions to be active again
setTimeout(function() {
element.style.webkitTransition = 'all 5s ease-out';
element.style.mozTransition = 'all 5s ease-out';
element.style.msTransition = 'all 5s ease-out';
element.style.oTransition = 'all 5s ease-out';
// apply desired 'animated' property
element.style.background = 'red'; // is applied smoothly
}, 10);
var ball = document.querySelector('.ball'),
ballSpeed = 2,
button = document.querySelector('button');
// Chane to random speed "instantly" (on button "click")
button.addEventListener('click', ()=>{
ballSpeed = Math.random()*8 + 1;
ball.style.transitionDuration = ballSpeed + 's';
ball.classList.remove('move');
ball.clientHeight; // <--- triggers repaint
ball.classList.add('move');
// set button text
button.textContent = ballSpeed.toFixed(2) + 's';
})
function animate( speed ){
ball.style.transitionDuration = '0s';
ball.classList.remove('move');
ball.clientHeight; // <--- triggers repaint. has to be after "move" class was removed
ball.style.transitionDuration = ballSpeed + 's';
ball.classList.add('move');
ball.removeEventListener('transitionend', animate)
ball.addEventListener('transitionend', animate); // keep rollin..
}
animate();
html, body{ height:100%; overflow:hidden; }
.ball{
position: absolute;
width: 3em;
height: 3em;
left:0; right:0; top:0; bottom:0;
margin: auto;
transition-duration: 2s; /* <-- start speed */
transition-timing-function: linear;
}
.ball::after{
content: '';
display: block;
width: 100%;
height: 100%;
transform: translateX(100%);
border-radius:50%;
background: gold;
}
.ball.move{
transform: rotate(360deg);
}
<button>2s</button>
<div class="ball"></div>
I don't know how this works in JQuery, but you could do this in CSS (at least at the time of writing):
div {
animation: trans 2s;
}
#keyframes trans {
0% {
width: 200px;
}
99.9% {
width: 200px;
}
100% {
width: 10px;
}
}
pure JS solution that should work with JQuery (have not tested).
The problem with the accepted answer is placing a value for the delay, but a better solution is to have a delay of 0. We are gonna use a little trick with the event loop to achieve this:
const button = document.querySelector('button');
function reposition() {
button.style.transition = 'none';
button.style.transform = 'translate(-50%)';
setTimeout(() => {
button.style.transition = '1s';
button.style.transform = 'translate(0)';
}, 0);
}
button.addEventListener('click', reposition);
<button>
Click Me
</button>
This is called a zero delay. It still uses a delay, but you don't have to feel icky about it because this will instantly run when the stack is clear.
If you want to understand why this is, I recommend watching this video
But here's a (messy) short explanation:
Basically what's happening is that setTimeout() will hold the value until a certain amount of time, our time here is 0, but it won't execute yet until the stack is clear, (why? this is, watch the video) because the browser still has to repaint the changes, the re-render will still be in the stack and as it finishes, the function passed to setTimeout() will be executed causing another re-render.
Do I know if this works 100% of the time? In theory, it should, but I'm no expert.
I am trying to redo the a tutorial I had posted links to in previous question to have as much HTML5 and CSS3 code. I read in some online article's that in HTML5 they are trying to get rid of the idea of Div tags, rather they are pushing for something known as section. Is that a correct observation. For example I have this section of code from the above tutorial.
https://skitch.com/android86/r67ey/dreamweaver
and what I am interested to know if I should be using div tags in my HTML5 code as well or is there a better way to do it rather than using Div's?
What I have in my HTML5 code at present is the following.
https://skitch.com/android86/r67ej/dreamweaver
Thanks for the group's valuable input.
a proof of concept for a sliding link over content (with display: block) on hover, using CSS3 transitions only.
NOTICE: this is a webkit (safari & chrome) only syntax, for the syntax for the rest of the browsers go here: http://css3.bradshawenterprises.com/transitions/
a simple element, with the following style:
a {
z-index: 100;
position: fixed;
-webkit-transition: all 1s ease-in-out;
display: block;
background-color: black;
width: 100%;
height: 500px; }
and the hover state style:
a:hover { height: 700px; }
The code submitted looks good, however I would include the extra lines to cover Firefox and Opera.
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
You can then use Modernizr (http://www.modernizr.com/) to cover all browsers with backup Javascript.
I would use something like this:
a.slideDown {
z-index: 100;
position: fixed;
display: block;
background-color: black;
width: 100%;
height: 500px;
-webkit-transition: top .2s ease;
-moz-transition: top .2s ease;
-o-transition: top .2s ease;
transition: top .2s ease;
top:5px;
}
a:hover.slideDown {
top:495px;
}
If you are including CSS3 as part of HTML5 (which you have to to allow animation!), have a look at: http://css3.bradshawenterprises.com/sliding/ . The jQuery isn't necessary, you could use the :target pseudo element instead.
For your case, just set a transition on the element, then change the height, or top value using the target selector.
It's probably around 4 lines of code if you only want it to work in newer browsers.
I'd agree with the comments about using CSS3 for transitions. I used this on a portfolio site and it looks fairly good. It's just a couple lines of code and if the browser doesn't support the transitions it will still display the content on hover, just without the animation.