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 have three divs on the same line. You can check the example here: http://yoyo.ro/abw just scroll to the bottom of the page to the three boxes: Made to Measure, Instagram and Video Tracking.
When I click the left one, I want the other two to slide to the right and some text to appear. I tried to do it, but it seems that I complicated it so much and it isn't even smooth.
function hideTest(){
$(".instagram").addClass("slideout");
$(".videotracking").addClass("slideout");
$(".instagram").animate({left:"150%"},500);
$(".videotracking").animate({left:"150%"},500);
}
function showTest(){
$(".instagram").animate({left:"33.3%"},500);
$(".videotracking").animate({left:"66.6%"},500);
$(".instagram").removeClass("slideout");
$(".videotracking").removeClass("slideout");
}
$(".madetomeasure").on('click',function(){
var testwidth = $(this).find(".vc_btn3-container").width();
$(this).find(".vc_btn3-container").css("width", testwidth);
if(!$(this).hasClass("openslide")){
hideTest();
$(".madetomeasure").addClass("openslide");
$(this).find(".txtbox").animate({left:0},500);}
else {
$(this).find(".txtbox").animate({left:"-100%"},500);
$(".madetomeasure").removeClass("openslide");
showTest();
}
});
here is the css relevant to the JS
.txtbox{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width: 66.5%;
display:none;
left:-100%;
padding:0px 15px;
float:left;
position:relative;}
.instagram, .videotracking{position:static;}
.instagram {left:33.3%;}
.videotracking{left:66.5%;}
.instagram.slideout{position:absolute;}
.videotracking.slideout{position:absolute;}
.madetomeasure .button{
z-index:1;
height:300px;
background: url(http://yoyo.ro/abw/wp-content/uploads/2016/02/instagram.jpg) 100% 30% !important;
border: none !important;}
.madetomeasure.openslide {width:100%;}
.madetomeasure.openslide .wpb_wrapper {display:flex;}
.madetomeasure.openslide .txtbox {display:block;}
Thank you so much for the patience... :) I really appreciate it
As far as I know, your problem of smoothness is because:
jQuery change the inline styling of the animated element per frame. That is a lot of work and you can actually see the action if you inspect your element when it's animating.
CSS does poorly on animating left and right. There are many articles about this but here's one if you don't want to search: https://css-tricks.com/tale-of-animation-performance/
The Solution
Fiddle: https://jsfiddle.net/kv5twc64/1/
The solution is very common, and is used by many CSS libraries, a trick using .active, CSS animation and some JS.
Here I used the transition property for .card:
.card {
display:inline-block;
float:left;
max-width:33.333%;
position:relative;
cursor: pointer;
transition: 0.5s all ease-out;
}
If you don't know, transition will create a tweening effect when the elements' property has changed.
And here is the trick: By using ~ selecting the siblings in CSS and the transform property:
.card.active .desc {
transform: translateX(0);
}
.card.active ~.card {
transform: translateX(66.666vw);
}
There are several upsides on using CSS in this case:
You can simplify your JS. The JS became:
$(function(){
$(".card").eq(0).click(function(){
$(this).toggleClass("active");
})
})
You can improve webpage performance
You can have more choices on (simple) easing functions in CSS (jQuery only offers "swing" by default). Check this out: http://easings.net You can do something like this:
transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
Hope this can help. But the lesson here is: Use CSS rather than JS when you can!
P.S. 66.666vw means 2/3 the width of the viewport width.
I'm attempting to use Bootstrap's Carousel to handle content that isn't the same height. The heights will differ based on the browsers width, and there is content below the carousel. I'd like to use CSS to animate the height change between slides. With some help from a friend I almost have this working in FireFox (the first slide jumps, the rest animate) but an obvious bug is happening with the sliding animation in Chrome.
Any input would be great, even if you think I should handle the height animation in a completely different way, please let me know!
Here is the JS and CSS that I think matter, but the whole thing is on JS Fiddle: http://jsfiddle.net/tkDCr/
JS
$('#myCarousel').carousel({
interval: false
});
$('#myCarousel').bind('slid', function(e) {
console.log('slid',e);
});
$('#myCarousel').bind('slide', function(e) {
console.log('slide',e);
var next_h = $(e.relatedTarget).outerHeight();
console.log(next_h);
$('.carousel').css('height', next_h);
});
By commenting out lines 12 and 13 of the JavaScript you can see that the bug is clearly being caused by assigning the variable next_h with the data from '$(e.relatedTarget).outerHeight();'. Even if the variable isn't used it still breaks the animation. Commenting out 11,12, and 13, will show you how the carousel functions normally.
CSS
.carousel {
width: 80%;
margin-left: auto;
margin-right: auto;
background: lightgoldenrodyellow;
-webkit-transition: height .5s ease;
-moz-transition: height .5s ease;
-ms-transition: height .5s ease;
-o-transition: height .5s ease;
transition: height .5s ease;
}
Thank you in advance.
// animate do the same - timeout is not needed
$('#myCarousel').carousel();
$('#myCarousel').bind('slide', function(e) {
$('#myCarousel').animate({height: $(e.relatedTarget).outerHeight()});
});
// After using animate, there is no need for transition in css (or height)
You can get around the problem by delaying the call to outerHeight() by a short timeout:
$('#myCarousel').bind('slide', function(e) {
setTimeout(function () {
var next_h = $(e.relatedTarget).outerHeight();
$('.carousel').css('height', next_h);
}, 10);
});
Also, you probably want to set the height of .carousel to something in the css, otherwise the first transition will begin at height 0, making it drop from the top.
I updated your fiddle here: http://jsfiddle.net/tkDCr/3/
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 want to make a background image disappear. It works.
But it fails when I try to delay it or to animate it.
Any guess what it's wrong and how to do it well?
$(function(){
$("#foto1").click(function() {
$("#foto1").delay(1000).animate.css({"background":"none"},2000);
});
})
http://jsfiddle.net/78W3u/
Tried like this
$(document).ready(function(){
$("#foto1").click(function() {
$(this).delay(1000).fadeOut(20000, function(){
$("#foto1").css('background', 'none') //<=== this remove the background after the animation stops
});
});
})
http://jsfiddle.net/78W3u/5/
This will fadeout an image : http://jsfiddle.net/2MQeC/
$(function(){
$("#foto1").click(function() {
$("#foto1").fadeOut(2000);
});
})
-- EDIT --
This will animate the background independently of the image : http://jsfiddle.net/2MQeC/1/
#foto1 {
background: black;
-webkit-transition: background 1.5s ease; /* Saf3.2+, Chrome */
-moz-transition: background 1.5s ease; /* FF4+ */
-ms-transition: background 1.5s ease; /* IE10 */
-o-transition: background 1.5s ease; /* Opera 10.5+ */
transition: background 1.5s ease;
}
$(function(){
$("#foto1").click(function(){
$this = $(this);
setTimeout(function(){
$this.css({
background: 'green'
});
}, 1000); // delay
});
});
As you can see, this rely on CSS3 transitions for background animation.
A better cross browser solution would be to use jQuery .animate() function.
But you can't modify as many properties as .css() could.
Extract from jQuery .animate() documentation :
Most properties that are non-numeric cannot be animated using basic
jQuery functionality (For example, width, height, or left can be
animated but background-color cannot be, unless the
jQuery.Color() plugin is used).
However, you could change your markup and separate your image and your background in two div who are superimposed. This could simplify what you are trying to do.