CSS3 Transitions happen instantly? - javascript

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.

Related

show a website loading image using only CSS (not Javascript or jQuery)

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.

Transitioning between pageloads

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);
});
});

Slide DIV from right of window

I have a div that i need to slide out from the right on page load and stay locked on the right side of the window. It would be great if it could delay for about 5 seconds and then slide out
<script type="text/javascript">
$("#slide").animate({width: 'toggle'}, 500);
</script>
html
<div id="slide"><img src="live.jpg"></div>
What am i missing?
You could try a couple of options.
If you want to use .animate(), you'll want to change the position from it's initial state. So in your CSS, you'll want to set the initial state of your div to something that is off of the page, like
#slide {
position: absolute;
right: 999em;
}
With this set, adding .animate() will animate the property you specify toward the value you specify, so specify where you want your div to end up after the animation completes.
$("#slide").delay(5000).animate({right: 0}, 500);
An alternative would be to use the jQuery addClass() method. If you do this, you'll want to define two classes in your stylesheet. The first class will be your div's initial state, again, positioned offscreen; the second class will be where your div ends up. For the animation, just use a CSS animation like this:
.div-start {
position: absolute;
right: 999em;
transition: right 4s ease-in;
-webkit-transition: right 4s ease-in;
-moz-transition: right 4s ease-in;
}
.div-animate {
right: 0;
}
Then in your jQuery, do this:
$('yourDiv').addClass("div-animate");
Edit:
You could also use setTimeout on this to have it fire after 5 seconds, like so:
setTimeout(function() {
$('yourDiv').addClass("div-animate");
}, 5000);
$(document).ready(function(){
$('#slide').delay(5000).animate({"width":"20%"}, 0500);
});
This will delay your animation by 5 seconds from when the pages has fully loaded, and then slide the content out to a width of 20%. Here is an example: http://jsfiddle.net/EdjjH/
$(document).ready(function(){
$("#slide").delay(5000);
$("#slide").animate({
width: '500px',
height: '500px',
});
});
Here is the fiddle: jsfiddle
This fiddle has a 5 second delay so be patient when looking at it.

Restart CSS animation on the same element

I'm just getting started with CSS animations controlled via Javascript, and I'm stuck with a problem that I'm sure it's quite simple...
What am I trying to achieve?
I want to have a kind of image zone where some images are displayed with an increasing opacity effect: I want each new image to appear upon the other when the user clicks on the image.
How am I trying to achieve it?
I have a "div" which contains two "img" tags, and I'm simply trying to just animate the upper "img" and then swap the image "src" when the new image has to be shown. Let me explain it:
"img1" is the image at the bottom, which is showing "My first photo".
"img2" is the image at the top, which starts with an opacity of 0.
When the user clicks the image, "My second photo" is associated with the "img2", and "img2" starts and animation to fade in.
When the user touches again, "img1" changes its "src" to show "My second photo", "img2" changes its alpha to 0, changes its source to "My third photo" and starts the fade in animation again.
And so on, making the effect that the new image is always appearing upon the current one.
The bizarre part: the code
As I'm still quite green on CSS animations and Javascript, I'm trying to do it as follows:
index.html:
<div style="position:absolute; top:50%; left:50%; margin-left:-114px; margin-top:-203px;" onClick="canviaImatge();">
<img id="img_1" class="pantalla" src="" style="position:absolute;" />
<img id="img_2" class="pantalla" src="" style="position:relative; left:50px" />
</div>
<script>
document.getElementById("img_1").src = arrImatges[0];
document.getElementById("img_2").src = arrImatges[1];
document.getElementById("img_2").style.opacity = 0;
</script>
index.html (Javascript)
function canviaImatge()
{
document.getElementById("img_2").style.opacity = 0;
document.getElementById("img_2").classList.remove('horizTranslateApareix');
if(currentPantalla == 1)
{
document.getElementById("img_1").src = arrImatges[0];
document.getElementById("img_2").src = arrImatges[1];
}else{
document.getElementById("img_1").src = arrImatges[1];
document.getElementById("img_2").src = arrImatges[0];
}
document.getElementById("img_2").classList.add('horizTranslateApareix');
}
style.css
.pantalla.horizTranslateApareix {
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
opacity: 1 !important;
}
I know I'm doing it the dirty way, but it's like I'm just there and it seems that I'm just missing a line, a tag or something... Any clue about it?
Thanks in advance for your time and effort! :)
When you bind event handler on div as well as on images inside the div, it will be called twice as there is no e.preventBubble() in event handler. You can avoid this by using it only on the div.
Second issue is that after first click inside the div, the transition is in final state and you don't move it to initial state. I would achieve required behavior by using 2 classes. One for transition and one for initial state, final state is implicit here, opacity:1 is default value.
.pantalla.invisible {
opacity: 0;
}
.pantalla.horizTranslateApareix {
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
Main part is in JS. We start by removing the transition, otherwise it would took 1s to hide the image as well. Then we hide the image and return the transition, do image swapping and finally show the image again, starting the transition.
function canviaImatge()
{
img2.classList.remove('horizTranslateApareix');
img2.classList.add('invisible');
img2.offsetHeight; // <-- force repaint, otherwise browser optimize and nothing changes
img2.classList.add('horizTranslateApareix');
// image swapping
img2.classList.remove('invisible');
}
This would be the ideal case, but browsers optimize, so we can't use it as simply as that. Browsers do as much as possible without repainting the page, so they merge several opearions to one and we loose our functionality. That's where magic comes in place. We enforce repaint asking for img2.offsetHeight, which has to recalculate positions and repaint the relevant part of page (possibly whole page). Other ways to achieve it, is to move code to setTimeout function, which can't be optimized either.
setTimeout(function() {
img2.classList.add('horizTranslateApareix');
img2.classList.remove('invisible');
}, 1)
Demo at http://jsfiddle.net/Gobie/e4m3R/2/

CSS3 replacement for jQuery.fadeIn and fadeOut

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

Categories

Resources