OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

CSS transitions for layout changes (as other elements are revealed in the DOM)?

  • Thread starter Thread starter mikemaccana
  • Start date Start date
M

mikemaccana

Guest
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:

enter image description here


Subsequent state:

enter image description here


Eg:

  • Initially only the blue block is displayed
  • The green block is displayed, pushing the blue block down
  • I would like the blue block to animate moving to its new position

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?
<p>When a new block is displayed, other blocks may move around the page.</p>

<p>Is it possible to use CSS transitions to animate the movement of a block, when another block is displayed?</p>

<p>Initial state:</p>

<p><img src="https://i.sstatic.net/aZbHc.png" alt="enter image description here"></p>

<p>Subsequent state:</p>

<p><img src="https://i.sstatic.net/Ma22L.png" alt="enter image description here"></p>

<p>Eg:</p>

<ul>
<li>Initially only the blue block is displayed</li>
<li>The green block is displayed, pushing the blue block down</li>
<li>I would like the blue block to animate moving to its new position</li>
</ul>

<p><a href="http://jsfiddle.net/BRB5j/" rel="noreferrer">Obligatory JSFiddle</a></p>

<p><strong>Is it possible to animate the blue block moving to its new position?</strong> I have CSS <code>transition</code> set on both the blocks and their parents.</p>

<p>Or (as I'm beginning to suspect) are CSS transitions only for actual CSS changes, <strong>not the subsequent effects of those CSS changes</strong>? </p>
Continue reading...
 

Latest posts

A
Replies
0
Views
1
Aarif Hussain A Nassar
A
F
Replies
0
Views
1
Fahmi Nur Fachrurozi
F
Top