css-transitions

I have the -webkit-transition-duration property set on a div, whose height is set by another class. When I use jQuery to toggle the class, it the transition does something funky. It goes all the way up, and then is set to the proper height instead of just moving from 50px height to automatic height which is what I expect it to do. What's the fix for this? Here is a demo: http://jsfiddle.net/XcFxQ/1/ This works: http://jsfiddle.net/Eric/XcFxQ/2/ Although the height is not strictly auto. It manually sets the height in order to make it animate. I was able to get it to work correctly without

I use a CSS framework which applies transitions on moving the mouse over input elements. I have a class which I want to not have this transition. Is this possible? Just put transition:none; in the css and make its priority higher than the others. Example: html: <div class="a"></div> <div class="a b"></div> ​ css: div.a { width: 200px; height: 100px; border: 1px solid black; background-color: #EEE; -webkit-transition: background-color 0.5s; } div.a:hover { background-color: #069; } div.a.b { -webkit-transition: none; }​ 来源： https://stackoverflow.com/questions/10630338/clear-css-transitions

Let's say I have a simple element: <a href="#" id="btn" onclick="return false">Click</a> Now I can change the look of this element on click via :active : #btn:active { background: red; } What I'd like however is that the element will stay red for about a second after I clicked it without altering the HTML (so no checkbox hack) or javascript. Is there a smart trick that can be abused for this? JsFiddle here Answering my own question. By abusing the :not pseudo class we can trigger an animation after a onclick happened: #btn:not(:active) { /* now keep red background for 1s */ transition:

I need a special transitionend -like event that fires once after all transitions are complete, or fires immediately if there are no transitions defined in the CSS. This what I've come up so far: (function($){ $.event.special.transitionsComplete = { setup: function(data, namespaces, eventHandle){ var queue = [], style = window.getComputedStyle(this, null), computedProps = style.getPropertyValue('transition-property').split(', '), computedDurations = style.getPropertyValue('transition-duration').split(', '), $node = $(this); // only count properties with duration higher than 0s for(var i = 0; i

The other day I stumbled onto an example that uses Vue.js, but my question is more about the CSS and HTML that Vue uses to achieve the transition between states. The cards temporarily get the class .shuffleMedium-move which adds a transition: transform 1s and the order of the nodes change in the DOM, but I don't understand why the transition occurs since the transform property never seems to get set and the items are positioned simply using float:left . I've been doing CSS for quite a while and I've always had to resort to using a combination of JavaScript position: absolute and transform to

I would like do a transition using CSS, but my element's dimensions are in pixels normally but in percent during the :hover event, and the transition doesn't work like this. Do you know any way to do this? You may have to use JavaScript to change the percentage value to pixels after it has been calculated. I think webkit reports dimensions in px regardless of how they were set when called via JavaScript. You can apply the transition on the % width and just use min-width as px fixed value. .elem { min-width:50px; /* min-width as the pixel value */ width:0%; /* width as the % value */ transition

So I need to create a flipping image almost exactly like this . But the difference is what if I want several buttons and each one flips to a specific face. Lets say I want 4 buttons labelled 1, 2, 3 and 4, and I want 4 different card faces, each a different color with the corresponding number on the face. So the page will load with face 1 showing and clicking on button 1 will do nothing, but clicking on button 3 will flip to a face showing the number 3 and so on etc etc. Any ideas? Matt Coughlin Simple solution Start with the same approach as in the online example you mentioned in the question

i came across an issue today and it took me so long to debug, I couldn't find a solution anywhere online so I thought it would be useful to document It seems that transitions do not work on Firefox if the parent's "overflow" property is changed together with the transition - ie: .parent { overflow: hidden; } .parent:hover { overflow: visible; } .child { opacity: 1; transition: opacity 1s linear; } .parent:hover .child { opacity: 0; } The transitions will not work on the child. Remove the "overflow:visible" property from the hovered parent, and everything is ok. It seems that changing the