css-transitions

问题 I know this question has probably been asked million times here in SO, but Ive tried most of the solution, I just dont know why it dont work for me. So I have a dropdown with display initially targeted to none . When I click on it, it shows nice transition. (So far so good). But when I click on it again to go hide the dropdown, it hides immediately, but I dont want that. I want to hide with similar transition that was assigned to show. Here is my code for CSS: .dropdown-menu { padding: 0 0;

问题 When I remove an item from a flexbox, the remaining items "snap" into their new positions immediately rather than animating. Conceptually, since the items are changing their positions, I would expect the transitions to apply. I have set the transition property on all involved elements (the flexbox and the children) Is there any way to animate edits (adds & deletes) to a flexbox? This is actually a showstopper for me and the one missing piece with flexbox. 回答1: I've fixed up @skyline3000's

问题 Is it possible to use CSS transitions to animate something between a position set as left: 0px to right: 0px so it goes all the way across the screen? I need to accomplish the same thing with top to bottom. Am I stuck calculating the screen width / object-size? #nav { position: absolute; top: 0px; left: 0px; width: 50px; height: 50px; -webkit-transition: all 0.5s ease-out; } .moveto { top: 0px; right: 0px; } and then I use jQuery's .addClass 回答1: If you know the width/height of the animated

问题 I create a greeting card for a client with css transition but I did not know that it was not compatible with IE9. The greeting card is this http://voeux.geekarts.fr/v4.html Is there a a way to get this working in IE9 ? putting a jQuery or any hack - some thing to get it to work in IE9. Thanks 回答1: As you've properly identified, Internet Explorer 9 was the last of the IE browsers to not support the transition property, or animations. That being said, it was also the last of the IE browsers to

问题 I'm using a combination of rules to achieve the CSS3 transition rule in as cross-browser compatible a way as possible: I'm using transition , -webkit-transition , -moz-transition , and -o-transition . Is there a similar -ms-transition property for any version of Internet Explorer? Is there a proprietary filter for older versions of IE, similar to how the following rules work for opacity in IE 6-8? /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft. Alpha(Opacity=50)"; /* IE 5-7 */

问题 Is it possible to get/set the current animation percentage of a CSS3 @keyframes animation using javascript, jQuery, or some other means? Say for example there is a div with class called .spin that simply spins around in a circle using a keyframe also called spin . I have tried to get the current percentage value of the animation using $('.spin').css('animation') , $('.spin').css('animation: spin') , and a couple other ways, but they all alert empty I'm also interested in changing the original

问题 Is it possible to get/set the current animation percentage of a CSS3 @keyframes animation using javascript, jQuery, or some other means? Say for example there is a div with class called .spin that simply spins around in a circle using a keyframe also called spin . I have tried to get the current percentage value of the animation using $('.spin').css('animation') , $('.spin').css('animation: spin') , and a couple other ways, but they all alert empty I'm also interested in changing the original

问题 So, I understand how to perform both CSS3 transitions and animations. What is not clear, and I've googled, is when to use which. For example, if I want to make a ball bounce, it is clear that animation is the way to go. I could provide keyframes and the browser would do the intermediates frames and I'll have a nice animation going. However, there are cases when a said effect can be achieved either way. A simple and common example would be implement the facebook style sliding drawer menu: This

问题 I need to detect if a CSS transition is completed before allowing a function to repeat again, to prevent messing up the margins. So how cam I have something like if (transitionend == true) { // do stuff } else { // do nothing } 回答1: The code below will trigger on the transitionend event for whatever element(s) you have in the $element variable. There are four different event names as I believe these cover all of the cross-browser inconsistencies. Replace the '// your event handler' comment

问题 I am trying to make a <ul> slide down using CSS transitions. The <ul> starts off at height: 0; . On hover, the height is set to height:auto; . However, this is causing it to simply appear, not transition, If I do it from height: 40px; to height: auto; , then it will slide up to height: 0; , and then suddenly jump to the correct height. How else could I do this without using JavaScript? #child0 { height: 0; overflow: hidden; background-color: #dedede; -moz-transition: height 1s ease; -webkit