Is it possible to use jQuery to toggle the opacity of an element (so that you can fade it in/out by the means of -webkit-transition:opacity .5s linear;) and then change the display to display:block if the element is shown, or display:none if the element is hidden?
For example: You click on an <a> tag, which shows a div by means of setting it's opacity to 1 and setting display:block. Then you click the <a> tag again, and it sets the opacity to 0 and then sets the display to none.
My attempt at this is below:
.visible{ opacity: 1; -webkit-transition:opacity .5s linear; display: block; } .close{ display: none; opacity:0; width:20px; height:20px; background-color:red; -webkit-transition:opacity .5s linear; } $(".toggle").click(function(){ if ($(".close").css("display") === "none") { $(".close").addClass("visible").delay(500).promise().done(function () { $(this).css("display", "block"); }); }; if ($(".close").css("display") === "block") { $(".close").removeClass("visible").delay(500).promise().done(function () { $(this).css("display", "none"); }); }; });
http://jsfiddle.net/charlescarver/zzP6g/
This particular page of the documentation was helpful:
transition-property
transition-duration
transition-timing-function
transition
So you can call a specific property, like opacity, or you can use all in a class name. I think the latter is possibly more useful, even if you have only one property to apply.
Basically, you can use a class with the all transition properties and toggle the class name. One of the things I found interesting was that you can actually do multiple versions on the class add (not quite the same effect occurs when removing the class, though). Also, couple opacity with width and height and it will work better than using display: none, as far as I could tell.
The below demonstrates how you could use the -webkit-transition property in layers. This is a simplified version, followed by a more sophisticated demonstration:
#block.transition let's me differentiate my transition properties:
<div id="block" class="transition"></div>
Basic properties, not animated:
#block { margin: 25px auto; background: red; }
The initial "unseen" state:
#block.transition { opacity: 0; width: 0; height: 0; padding: 0; -webkit-transition: all 2s ease-in-out; }
And the animation steps:
Note, all I'm doing here is toggling the .show class:
Demo (Source)
Markup
<p><button class="toggle">Toggle Blocks</button></p> <div id="block" class="transition"> <div class="blocks transition"></div> <div class="blocks transition"></div> <div class="blocks transition"></div> </div>
CSS
The containing #block:
#block { margin: 25px auto; background: #333; -webkit-transition: opacity, display, width 1.5s ease-in-out; } #block.transition { opacity: 0; width: 0; padding: 0; border: 1px solid yellow; -webkit-transition: all 1.9s ease-in-out; } #block.transition.show { opacity: .3; border-color: blue; -webkit-transition: all .5s ease-in-out; } #block.transition.show { opacity: 1; width: 550px; padding: 25px; border-width: 15px; -webkit-transition: all 3s ease-in-out; }
Group of three .blocks:
jQuery
Demo (Source)
This seems to be a duplicate: Transitions on the display: property
This question is very very similar, and should lead you to the same conclusion.
Best wishes,
Korvin
Why don't you add an event listener to the CSS3 transition end events, when the event fires, you either hide or show the element.
$('.close').on('transitionend webkitAnimationEnd MozTransition OTransitionEnd MSTransitionEnd', function () { $(this).show(); });
With this solution, you can remove the setting the css property display to block or none in your click event, and handle it in the transitionend event handler.
If you need a more detailed example I would be happy to provide it. This is obviously just a starting point to get you in the right direction.
Full example:
翻译