This answer covers how to use jQuery to accomplish this, but I'd like to avoid that as a) I don't know jQuery and b) my React project doesn't include it.
I have a flexbox container of elements, each of which has a width of either x or 4*x, depending on a boolean variable in state.
When the width changes, the animation is pretty smooth, and it does push other elements as it grows.
But, each time an element reaches the border of the div & wraps to the next row, the animation stutters.
Here's a codepen to illustrate. (it's using React as I'm unsure how to replicate this in vanilla css/html/js)
Is there a way to animate the transition of an element from one line to the next?
Related
so I have a list of tiles and each of those tiles is able to expand a box underneath itself. When you expand this box, all the other tiles beneath should be pushed down and when you close the expandable, move back up. I am achieving this effect by animating the height of the expandable. With the last 10 or sth tiles it works really smooth, but when toggling the very top ones, the animation is not smooth at all, how can I fix this? I am using React and their CSSTransitionGroup.
I haven't seen your code but maybe you should consider toggling className with React and make transition of height with CSS, this would be an elegant way to do that.
I have this situation click here
according to text length, the buttons height changes. when it does I want its parallel button height made equal to that of first one (not of all buttons but of only its parallel button).
I would approach this in one of two ways - either using jQuery (fiddle - notice that you would need to wrap each button pair in its own ul - if you don't do this the jQuery would be more complicated) or by cheating and dropping in a background image which gives the effect of what you're after - this could be done, again, by wrapping each button pair in its own ul and dropping in a background image containing vertical lines to wrap them - you could then 'cap off' each column by adding starting and finishing li elements with graphical end caps.
I understand that you want to go with CSS only, but I can't think of a way that could be done. There may be something you could do involving careful balancing of max-height, min-height, and height... but I can't think of how that would work at the moment.
I'm developing a website using bootstrap and my header is a navbar-inner class.
In some pages I need to put another div of a different class right under navbar-inner and I want it to seamlessly continue to use the same gradient so that the user feels like it is a continuation of the header.
Probably I can find a way to calculate the gradient of the navbar-inner and make another one starting with the ending color of that, but this won't look nice since the height both of the navbar and of the other div change dynamically.
Can anyone suggest a good approach for combining the gradient styling across a dynamic number of div elements?
Thank you
Along the same lines as what #Ana suggested, I think the easiest way is to wrap them together in one element. Rather than nest them, I would wrap them both as siblings in a parent div, which would have the desired styling. That way the gradient and height adjusts automatically, whether or not you include the second div on a given page.
I have a bunch of tiles on a page that expand as the user mouses over them. The expanded one should have the highest z-index, and this works, but I need the z-index to remain until the size transition is complete. Is there a way to do this using CSS only, no JavaScript? Since I'm using transitions, I'm not too worried about compatibility here, I applied progressive enhancement correctly.
Here's a jsFiddle that demonstrates this. Mouse over A; it transitions out. Mouse off of it, however, and it falls behind B. I need it to stay in front of B until the transition completes. Is there an elegant way to do this?
You need to define the z-index, as well as animate it.
This works in Firefox (8.0.1) and Webkit.
You need to set z-index to transition too: http://jsfiddle.net/uHJwT/2/
Try using transitions like in http://jsfiddle.net/frozenkoi/YK52N/ (note the comments in the CSS section, for both the .item and .item:hover)
The trick is to use transitions for the z-index property too. You can set, for example, a value of 10 for the normal items and 11 for the hovered ones. You also have to use transition-delay so that the animation for moving the mouse out doesn't reset the z-index inmediately. Next, add a different value to transition-delay to the rule for :hover with a value of zero so that the z-index does update inmediately when the mouse goes into the item.
In short, .item has the transition for mouse out of the item and .item:hover the rules for when the mouse moves in.
Here's the one solution: http://jsfiddle.net/uHJwT/4/
Essentially, it uses another wrapper div that has sufficient width & height to cover animated surface - on hover, it elevates its z-index so that the animated div remains on top. Of course, this is not full-proof solution - it is based on the fact that typical hover off would be down movement and it works for that - but hover off in diagonal direction would not work. But seems to be a reasonable CSS only solution - I would rather used js to get a perfect one.
I'm trying to find out why this CSS3 transition affects the parent div:
http://jsfiddle.net/BpUqt/5/
I'm trying to move an object up inside a div without changing the height of its parent div.
But what happens is that the height of the box shrinks by 1px each time the transition begins/ends (with or without border)
While I want to use three of these in a row my content beyond begins to jump up too if the user hovers over these items very quickly.
Setting an fixed height is not an option since I'm working on an responsive layout.
Instead of animating margin (which means the box height needs to be recalculated, so rounding errors on partial pixels causes movement), use transforms.
Also, remember that IE10 has transitions, so use the ms prefix as well.
Have a look at http://jsfiddle.net/BpUqt/10/
Ok, here's a simple work-around. Simply add a negative margin and it works:
http://jsfiddle.net/BpUqt/12/
Here's how it actually looks like (minimal version):
http://jsfiddle.net/sSjQt/