Hovering the mouse over an element flips it. I would like a JavaScript function to run when the transition started when the user mouses-off the element, completes.
i.e. I would like some JavaScript to run when the element returns to its natural state (un-flipped, in this case) when the user is no longer hovering over it.
I have tried to bind to the webkitTransitionEnd event, but this fires when the transition for hovering completes as well as when the transition for mouse-off completes. How can I distinguish between these two transitions?
My CSS looks like this:
.back {
position: absolute;
z-index: 800;
-webkit-transition: z-index 0s linear .25s, -webkit-transform .5s ease-in-out;
-moz-transition: z-index 0s linear .25s, -moz-transform .5s ease-in-out;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
.searchResult:hover .back {
position: absolute;
z-index: 900;
-webkit-transition: z-index 0s linear .25s, -webkit-transform .5s ease-in-out;
-moz-transition: z-index 0s linear .25s, -moz-transform .5s ease-in-out;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
My JavaScript looks something like this (unsuitable because fires on completion of both mouse over and mouse-off transitions (i.e. flip and un-flip)):
el.find('.back').bind("webkitTransitionEnd", function (e) { /* do stuff */ });
I think (I have yet to perform more than 2 minutes worth of testing) I have solved this issue.
The solution is to add a conditional in the javascript based upon a known CSS property of the event target element. In my case I know the z-index is different in the flipped and non-flipped states, and using this in my javascript appears to solve the issue.
The conditional looks like this:
if(e.originalEvent.propertyName === '-webkit-transform' &&
$(e.originalEvent.target).css('z-index') === '800') {
/*we know we are at the end of the correct transition*/
}
My test browser is very modern however (at the time of writing): Chrome 22.0.1186.0 canary.
The event listener actually fires multiple times, once for each property. You can access the property name with event.propertyName. Putting it all together...
element.addEventListener("webkitTransitionEnd", function(e){
if(e.propertyName == "width") {
doSomething();
}
}, false);
or in jQuery
$(element).on("webkitTransitionEnd", function(e){
if(e.originalEvent.propertyName == "width") {
doSomething();
}
});
Related
An element has class slider-item:
.slider-item{
transform: translateY(100%);
transition: transform 100s ease;
transition-delay: 800ms;
}
When i click on a button ,i want the element to transition between translateY(-100%) and translateY(0).
I add classes prev-version and next by javascript respectively:
.slider-item.prev-version{
transform: translateY(-100%);
transition: none;
}
.slider-item.next{
transform: translateY(0);
transition: transform 100s ease;
transition-delay: 800ms;
}
But i see transition happens between translateY(100%) and translateY(0). next class overrides transform: translateY(-100%); in prev-version class. Please help me what should i do?
The best thing to try would probably be to use Vanilla JavaScript, jQuery, or some other type of framework to directly edit and change the CSS attributes.
So for example the jQuery version would be:
$("#slider-item.next").css("transform:translateY(0)");
Keep in mind you would need to add logic so that if the attribute was 100 it would change it back to 0 and then if it was 0 it would change it back to 100.
w3schools.com/jquery/jquery_css.asp
I might didn't understand your question but seems that you can use css animation for this:
document.querySelector('button').addEventListener('click', function () { document.querySelector('.slider-item').classList.add('example'); });
button {position: fixed; bottom: 10vh} /* just for demo */
.slider-item{
transform: translateY(100%);
transition: transform 100s ease;
transition-delay: 800ms;
}
.example {
animation: example 3s ease-in-out;
}
#keyframes example {
from {transform: translateY(-100%);}
to { transform: translateY(100%);} /* should be the same as the value declared initial on .slider-item */
}
<div class="slider-item">Slider Item</div>
<button>Click</button>
http://punkave.com/
The top left Logo: when you hover over it:
How do you code this?
Transition from one image to another and have it rotate.
You can use transform on :hover for the rotated state. And transition for the animation.
#logo {
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
#logo:hover {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
I'm having a small issue with my code. I have an element that when the page scrolls it will appear. However, I cannot get it to "appear" in a smoother way. I have tried CSS transitions and attempted fadeIn but neither work. It always just "jumps" in, I cannot get it to ease in.
Here is the code:
$(window).on("scroll", function () {
$('.navbar').toggleClass('visible', $(document).scrollTop() > 40);
});
So it appears just fine, but I can't figure out how to animate adding the class name.
This is the CSS btw:
.navbar {
visibility: hidden;
}
.navbar.visible {
visibility: visible;
}
visibility can't be animated with CSS transitions.
But you can do :
.navbar {
opacity: 0;
transition: opacity .5s ease; // Feel free to use prefixes.
}
.navbar.visible {
opacity: 1;
}
CSS transition / animations is surely the best way to animate something in 2014. You should avoid fadeToggle() and others jQuery animation methods.
instead of using toggleClass, use fadeToggle. it will do everything for u as far as CSS..
give it a try, just fadeToggle();
Here is the example of your code with correct css transition. You cannot animate visibility, but you can play with position and opacity.
http://jsfiddle.net/xZ6fm/
.navbar {
position: fixed;
top: -100px;
left: 0; right: 0;
padding: 12px;
opacity: 0;
background: #ccc;
}
.navbar.visible {
top: 0;
opacity: 1;
-webkit-transition: top 0.3s linear, opacity 0.7s linear;
-moz-transition: top 0.3s linear, opacity 0.7s linear;
transition: top 0.3s linear, opacity 0.7s linear;
}
As indicated in the other answer, fadeToggle() will get the work done for you. And frankly, it's probably the easiest way to accomplish such an effect.
CSS transitions require the transition property. Place this block of code in each of your CSS declarations:
transition: visibility .25s linear;
-webkit-transition: visibility .25s linear;
-moz-transition: visibility .25s linear;
-o-transition: visibility .25s linear;
If you have difficulties with visibility, try using opacity instead.
I'm trying to have images fade in with css3 once they're loaded. The problem is the way my methods are currently chained it fades it in and out for a split second twice. instead of just being blank and fading in.
my solution was to try and split out the animation code into a seperate class that i apply AFTER i initially set the opacity to zero (i do this in JS so people without js enabled can still see the images).
It's still not working though
I assume its because in this code its setting the opacity to zero and immediately adding an animation transition class which somehow catches the opacity .css() method while its changing still (dont know how this is possible,... shouldnt it complete opacity before moving on to add class?)
// nice thumbnail loading
$('.thumb').css('opacity','0').addClass('thumb-animated').on('load', function(){
$(this).css('opacity','1');
});
.resources .thumb-animated {
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-ms-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
}
Well...
Why do you set opacity to 1 in jQuery?
If you want to use CSS3 and not simply fadeIn(200) why don't you add "opacity: 1" to css class thumb-animated?
EDIT:
Note that load will not be triggered if the image is already in cache.
Also, !important has to be added to rewrite the rule modified via javascript.
There you go: http://jsfiddle.net/enTCe/5/
This seems to work perfectly outside JSfiddle, on JSfiddle looks like it waits for all the images to be loaded.
What about using just css animations? No JS code is needed.
#-webkit-keyframes opacityChange {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes opacityChange {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-ms-keyframes opacityChange {
0% { opacity: 0; }
100% { opacity: 1; }
}
.thumb {
width: 200px;
height: 200px;
opacity: 1;
-webkit-animation: opacityChange 5s;
-moz-animation: opacityChange 5s;
-ms-animation: opacityChange 5s;
}
You can wait adding the class to the image is loaded
$('.thumb').css('opacity','0').on('load', function(){
$(this).addClass('thumb-animated').css('opacity','1');
});
Try something like this:
$('#thumb').hide();
myImg = $('<img>').attr('src', 'thumb.png').load(function(){
$('#thumb').html(myImg).fadeIn(200);
});
Is a CSS3 transition like described below feasible?
Given a modal overlay, on close, instead of just fading out, I would like to have it scale in size from 100% to 0% towards a specific button on the page.
Has anyone seen this done with CSS3? Possible?
Thanks
If you know the position of the button you're trying to shrink the overlay toward, you can animate the top, bottom, left, and right of the overlay to the top, bottom, left, and right of the button, respectively. If it varies, you might need some kind of JavaScript hook to determine the position of the button, like using jQuery's .offset.
Is this what you want?http://jsfiddle.net/AZWhQ/1/
.myOverlay{
width:100%;
height:100%;
-webkit-transition: -webkit-transform .5s ease-out;
-moz-transition: -moz-transform .5s ease-out;
-ms-transition: -ms-transform .5s ease-out;
-o-transition: -o-transform .5s ease-out;
transition: transform .5s ease-out;
background-color: rgba(0,0,0,.2);
}
.myOverlayClose{
-webkit-transform: scale(0.0);
-moz-transform: scale(0.0);
-ms-transform: scale(0.0);
-o-transform: scale(0.0);
transform: scale(0.0);
}
check the Demo
It is possible - here is a very simplistic version of it done by setting the transform-origin:
Fiddle
Code:
document.getElementById('dismiss').addEventListener('click', function() {
var button = document.getElementById('mybutton');
var overlay = document.getElementById('overlay');
overlay.style['-webkit-transform-origin'] = (button.offsetLeft + button.offsetWidth/2) + 'px ' +
(button.offsetTop + button.offsetHeight/2) + 'px';
overlay.style['-webkit-transform'] = 'scale(0)';
overlay.addEventListener('webkitTransitionEnd', function() {
overlay.className = 'hide';
});
});
The most difficult part of doing this would be to get the buttons position relative to the overlay. Then use that to set the transform-origin which will act as the vanishing point.