I have written a small amount of code to try and replicate jQuery's .fadeIn() and .fadeOut() functions using CSS transitions to look better on touch devices.
Ideally I'd like to avoid using a library so that I can write exactly what I want, and as a learning exercise.
fadeOut works well.
The idea for fadeIn is to use CSS3 transitions to adjust the opacity of an element, after which the element will be set to display:block; (using is-hidden class) to ensure it's not still clickable or covering something beneath it.
fadeIn is not working though. I think it is due to adding the is-animating class at the same time as removing the is-hiding class. The transitionEnd event never fires because a transition does not occur:
function fadeIn (elem, fn) {
var $elem = $(elem);
$elem.addClass('is-animating');
$elem.removeClass('is-hidden');
$elem.removeClass('is-hiding');
$elem.on(transitionEndEvent, function () {
$elem.removeClass('is-animating');
if (typeof fn === 'function') {
fn();
}
});
};
And the CSS
.is-animating {
#include transition(all 2000ms);
}
.is-hiding {
// Will transition
#include opacity(0);
}
.is-hidden {
// Won't transition
display: none;
}
Here's the code: CodePen link
Update: I have found what I'd describe as a hack, but that works very well: CSS3 replacement for jQuery.fadeIn and fadeOut
Working code after this fix: Fixed
A solution without setTimeout would be very valuable though.
i don't know what you really wanna achieve but if your using css3 your using a modern browser. in that case pure css & javascript is a better solution.
it's all about how you write the css transition.
here is the js code
var div=document.getElementsByTagName('div')[0],
btn=document.getElementsByTagName('button')[0];
div.addEventListener('click',function(){
this.classList.add('hide');
},false);
div.addEventListener('webkitTransitionEnd',function(e){
console.log(e.propertyName);
},false);
btn.addEventListener('click',function(e){
div.classList.toggle('hide');
},false);
css code
div{
width:200px;height:200px;
opacity:1;
overflow:hidden;
line-height:200px;
text-align:center;
background-color:green;
-webkit-transition:opacity 700ms ease 300ms,height 300ms ease ;
}
div.hide{
height:0px;
opacity:0;
-webkit-transition:opacity 700ms ease,height 300ms ease 700ms;
/*add the various -moz -ms .. prefixes for more support*/
}
and the html
some text
<div>click here</div>
some text
<button>toggle</button>
here is an example.
http://jsfiddle.net/qQM5F/1/
Alternative solution using Keyframes
js
var div=document.getElementsByTagName('div')[0],
btn=document.getElementsByTagName('button')[0];
div.addEventListener('webkitAnimationEnd',function(e){
div.style.display=div.classList.contains('hide')?'none':'';
},false);
btn.addEventListener('click',function(e){
div.style.display='';
div.classList.toggle('hide');
},false);
css3
div{
background-color:green;
-webkit-animation:x 700ms ease 0ms 1 normal running;/*normal*/
opacity:1;
}
div.hide{
-webkit-animation:x 700ms ease 0ms 1 reverse running;/*reverse*/
opacity:0;
}
#-webkit-keyframes x{
0%{opacity:0;}
100%{opacity:1;}
}
example
http://jsfiddle.net/qQM5F/8/
here is a prototype
Object.defineProperty(HTMLElement.prototype,'toggleOpacity',{value:function(){
function check(e){
this.style.display=this.classList.contains('hide')?'none':'';
this.removeEventListener('webkitAnimationEnd',check,false);// clean up
}
this.addEventListener('webkitAnimationEnd',check,false);
this.style.display='';
this.classList.toggle('hide');
},writable:false,enumerable:false});
css
.fade{
-webkit-animation:x 700ms ease 0 1 normal;
opacity:1;
}
.fade.hide{
-webkit-animation:x 700ms ease 0 1 reverse;
opacity:0;
}
#-webkit-keyframes x{
0%{opacity:0}
100%{opacity:1}
}
usage
the element you need to fade needs a class fade then toggle it with
element.toggleOpacity();
example
http://jsfiddle.net/qQM5F/9/
You may want to consider a couple of plugins that might take care of what you want:
jQuery.transition.js retrofits the existing jQuery animation methods to use CSS transitions in browsers that support them.
Transit adds a transition function you can use to define your own transitions. It uses jQuery's effect queue, so you can queue up the changed display value to run after opacity has finished transitioning.
I have managed to fix this by doing something that feels unnatural and hacky:
function fadeIn (elem, fn) {
var $elem = $(elem);
$elem.addClass('is-animating');
$elem.removeClass('is-hidden');
// Smelly, setTimeout fix
setTimeout(function () {
$elem.removeClass('is-hiding');
}, 0);
$elem.on(transitionEndEvent, function () {
$elem.removeClass('is-animating');
if (typeof fn === 'function') {
fn();
}
});
};
Adding the setTimeout function to the class that contains the transition-able property fixes the issue.
Working code here: Codepen fixed code
Related
I have an element that move relative to scroll. I use jQuery for this:
$('#object').css('transform','translateY('+($(window).scrollTop()*.4)+'px)');
CSS
#object {
width:200px;
top:100%;
left:50%;
position:absolute;
}
This works well, but moves my element directly without any easing (delay).
By setting a transition using css I get some of the effect that I'm looking for, but doesn't look good if I scroll at the same time:
transition: 400ms ease;
Is it possible to do this smooth, but in a more elegant way?
I figured it out by myself. The problem was the css "ease". Ease means that it will start slow and end slow, which will result in at the time scrolling is active it will always be on the slow start. However if you use css "ease-out" it will always start fast and slow down in the end. So use this:
transition: 400ms ease-out;
Or cubic-bezier if you want to customize the easing-curve yourself:
transition: 400ms cubic-bezier(0.235, 0.615, 0.185, 0.995);
When doing a parallax effect you will set a new translateY() on every scroll event that triggers. The event triggers really often and normally there should be no need for a transition. If you still experience bad rendering it is probably because the browser does not render on every event. You can force the browser to do so by using requestAnimationFrame.
var translate = function() {
$('#object').css('transform','translateY('+($(window).scrollTop()*.4)+'px)');
}
$(window).on('scroll', function() {
window.requestAnimationFrame(translate);
});
How can i put a logo and a loading image when a user open the website
when the user open the website the logo appear with a loading image than the home page appear after a certain moment like this website
http://www.theprofessionalslb.com/
and it possible to do that without using javascript or jquery only in css?
Yes, you can animate with pure CSS using the animate property.
For example, if you would want #img1 to show first, and #img2 to show after, you can set an animation-delay on your second image and make that equal to the animation-duration of your first:
#img1 {
...
animation-duration: 2s;
...
}
#img2 {
...
animation-delay: 2s;
...
}
Then in your animation you can animate e.g. the opacity property to simulate a fade-in effect.
More on CSS Animations here.
EDIT
I created a fiddle doing what you want.
For support in more browsers, please advice caniuse.com.
Use loader image and apply it to body. Show the image till page load and when page is ready remove the image.
jQuery( window ).load( function(){
//show the image here.
});
jQuery( document ).ready( function(){
//hide the image here.
});
The way they did it, it's handled by jQuery-Animations, something like this:
// Fade-In logo
$('#logo').fadeIn(2000, function() {
// When done, fade-in the slogan
$('#slogan').fadeIn(1400, function() {
// When this is done, wait 1s and then fade both out
$('#logo, #slogan').delay(1000).fadeOut(2000, function() {
// Finally fade-in the content
$('#content').fadeIn(2000);
});
});
});
The first argument of the fadeIn-method is the animation-time, the second argument is the callback-function, that gets executed after the animation is done. For more information see its documentation.
This technique assumes either, that your animated elements are either set to opacitiy: 0 in their CSS, or that you set them hidden in your JS:
$('#logo, #slogan, #content').fadeOut(0);
or:
$('#logo, #slogan, #content').hide();
You could also use plain CSS for this, where you would do something like this:
#logo, #slogan, #content {
opacity: 0;
}
#keyframes fadeInAndOut {
0% { opacity: 0; }
50% { opacity: 1; }
75% { opacity: 1; }
100% { opacity: 0; }
}
#logo {
animation-name: fadeInAndOut;
animation-duration: 6400ms;
}
#slogan {
animation-name: fadeInAndOut;
animation-duration: 4400ms;
animation-delay: 2000ms;
}
#content {
transition: opacity 2000ms ease-out 6400ms;
opacity: 1;
}
Please be aware that both examples are untested and should just give you an idea. You will probably need to also use the -webkit-keyframes prefixed version for the animation and also if you want the animation timings to be visually perfect, you'd need two separate fadeInAndOut-keyframes for both.
I want to have transition effects between pageloads like slide, rotate, fade, etc. I'm trying to accomplish this with the following code, but it's not working. Any ideas?
$("asp:HyperLink.smoothlink").click(function (e) {
$("body").addclass("fadeout");
setTimeOut(function() {
window.location = e.currentTarget.attributes['data-url'].value;
},1000);
}
CSS
.fadeout
{
opacity:0;
transition :opacity 1s ease-in-out;
-moz-transition-opacity 1s ease-in-out;
-webkit-transition:opacity 1s ease-in-out;
}
As far as I understand you are trying add an animation to your current page when you click on a specific link. It seems that you are working in a .NET environment and I'm not too familiar with its WebControls, however couple of errors stand out:
You are not using proper selector string - asp:HyperLink.smoothlink. Try using a.smoothlink instead.
JavaScript is case-sensitive so addclass and 'setTimeOutare causing an error. Try using 'addClass and setTimeout instead.
You also might need to use the href attribute instead data-url, but that really depends on what is the .Net control generating.
Here is a working example of what i think you are trying to do:
HTML:
example link
CSS:
.fadeout {
opacity:0;
transition :opacity 1s ease-in-out;
-moz-transition-opacity 1s ease-in-out;
-webkit-transition:opacity 1s ease-in-out;
}
JavaScript:
$(document).ready(function () {
$("a.smoothlink").click(function (event) {
event.stopPropagation();
$("body").addClass("fadeout");
setTimeout(function () {
window.location = $(event.currentTarget).attr('href');
}, 1000);
});
});
I have an element called #artwork which needs to be animated:
#artwork{
-webkit-transition: all 20s ease-in;
transition:all 20s ease-in;
width:75%;
display:block;
margin:0px auto;
}
#artwork.trans{
width:60%;
}
The problem is, the transition happens instantly without any delay (in my case 20s). I have tried Jquery's toggleClass function to no avail and I also tried the css function which also didn't work.
$(window).load(function(){
var addImage = function(background){
$("#images").append("<div class='image'><img id='artwork' src='"+ background +"' /></div>");
$("#artwork").css("width", "65%");
$("#artwork").toggleClass("trans");
};
addImage("http://4.bp.blogspot.com/-f5Oju8nYOe4/T91Kdqww3GI/AAAAAAAAGEk/s1tZR76WQfc/s1600/winter-wallpaper-7.jpg");
});
The element needs to be drawn on the page before it can be transitioned. If you add an element it's a good rule of thumb to give 10-100ms for the initial state to render before changing it's styles.
You may also want to consider using an animation instead, which you can do without the delay.
Here's an animation I've used to move something into the page from the right, feel free to modify it to suit your needs.
.some_class{
-webkit-animation: myanimation 500ms ease-in-out;
-moz-animation: myanimation 500ms ease-in-out;
animation: myanimation 500ms ease-in-out;
}
#-webkit-keyframes myanimation {
0% { left: 200%; }
100% { left: 0%; }
}
#keyframes myanimation {
0% { left: 200%; }
100% { left: 0%;}
}
You can't switch from display:none to display:block in a transition. This is why your animations are happening instantly.
Including the display change in the transition tells CSS to snap to position.
You need to switch display to block, then wait a frame, then apply your other new properties for them to animate. This is why when you change the values in the inspector they animate.
Here's a codepen showing an example of the above http://codepen.io/gunderson/pen/emyReW
When using the transition shorthand property, the delay is placed at the end. In your code, your transition will last 20s with no delay.
If you want it to be delayed by 20s, it should be written like this:
transition:all 2s ease-in 20s;
EDIT
Here is a demo
As Michael's answer above, the image need to be drawn before any animation taking effect.
Let's take a look at your code:
$(window).load(function(){
var addImage = function(background){
$("#images").append("<div class='image'><img id='artwork' src='"+ background +"' /></div>");
$("#artwork").css("width", "65%");
$("#artwork").toggleClass("trans");
};
addImage("http://4.bp.blogspot.com/-f5Oju8nYOe4/T91Kdqww3GI/AAAAAAAAGEk/s1tZR76WQfc/s1600/winter-wallpaper-7.jpg");
});
After the append function is called, the image begins to load. At this time, the browser will proceed other functions css or toggleClass below the append. Which is why you will never see your image animated.
To fix this, you need to put your append image code into another function, and animation code into another function, like this:
$(window).load(function(){
var addImage = function(background){
appendImage(background);
animateImage();
};
var appendImage = function(background) {
$("#images").append("<div class='image'><img id='artwork' src='"+ background +"' /></div>");
};
var animateImage = function() {
$("#artwork").css("width", "65%");
$("#artwork").toggleClass("trans");
};
addImage("http://4.bp.blogspot.com/-f5Oju8nYOe4/T91Kdqww3GI/AAAAAAAAGEk/s1tZR76WQfc/s1600/winter-wallpaper-7.jpg");
});
In this code, the addImage function will call two external functions, which will happen sequentially. By doing this, the animateImage will be called right after the appendImage function is finished.
This is the demo on Codepen.
Hope this helps.
I'm having a bit of a frustrating problem regarding fading out an element using jQuery after it has been faded in with CSS. I set up a CSS animation to fade in an element when the page loads using the following (I've also got the relevant browser prefixes included too, I'm using Stylus):
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.elem {
opacity: 0;
animation: fadein 500ms ease-in 1ms forwards;
}
My issue is that when an event handler is activated that runs the following, the fadeOut does not fade but instead skips straight to nothing:
$('.elem').fadeOut(400, function(){
$('.elem').fadeIn(400);
});
I've been able to replicate the issue in this JSFiddle. Can anyone help me out? :) Thanks a lot!
I would say it's conflicting with the CSS you're using. jQuery is probably using other opacity related properties than what your CSS is. An all jQuery solution might be this:
CSS
.elem {
display: none;
}
jQuery
$('.elem').fadeIn(1000); // on page load, fade in with jQuery
$('#go').click(function(){
$('.elem').fadeOut(400, function(){
$('.elem').fadeIn(400);
});
});
Related: Conflict between CSS transition and jQuery fade
I know you asked for FadeIn and FadeOut... here's your code with animate and opacity instead.
$('#go').click(function(){
$('.elem').css('animation','none').animate({
'opacity' : 0
},function(){
$('.elem').animate({
'opacity' : 1
});
});
});
It seems that the css-animation has higher precedence than the inline style that jQuery applies to the element when fadeOut is used. This means the animation's opacity : 1; overrides any opacity setting jQuery applies, up until jQuery sets the element to display:none;
You can do this to get around:
$('#go').click(function(){
$('.elem').css('animation','none').fadeOut(400, function(){
$('.elem').fadeIn(400);
});
});