When a new block is displayed, other blocks may move around the page.
Is it possible to use CSS transitions to animate the movement of a block, when another block is displayed?
Initial state:
Subsequent state:
Eg:
Obligatory JSFiddle
Is it possible to animate the blue block moving to its new position? I have CSS transition
set on both the blocks and their parents.
Or (as I'm beginning to suspect) are CSS transitions only for actual CSS changes, not the subsequent effects of those CSS changes?
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.
transition-property. transition-duration. transition-timing-function. transition-delay.
Triggering transitions You can trigger CSS transitions directly with pseudo classes like :hover (activates when the mouse goes over an element), :focus (activates when a user tabs onto an element, or when a user clicks into an input element), or :active (activates when user clicks on the element).
You can make layout changes with CSS3 as you can animate margin, position, width, height...
The problem is triggering those layout changes. but you can use help from JS to trigger those animations via a class change.
For your example, you could do this :
FIDDLE
CSS :
.item {
width: 150px;
height: 150px;
margin: 20px;
overflow: auto;
transition: all 0.5s ease-out;
}
.first {
margin-top:-170px;
}
JS :
setTimeout(function () {
document.querySelector('.first').classList.remove("first");
}, 2 * 1000)
There is a technique for this called FLIP (First, Last, Invert, Play) and a library implementing it called Flipping.js. It is described in this article.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With