CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Complexity
Complexity

Reputation: 5830

Moving UL/LI elements using CSS3 animations

I want to create some animations by using CSS3 transitions. Imagine the following UL/LI element:

<ul>
    <li class="green" id="green" style="display: none;">Contents 1</li>
    <li class="red" id="red" style="display: none;">Contents 2</li>
    <li class="yellow" id="yellow" style="display: none;">Contents 3</li>
</ul>

It's important to know that those elements are positioned horizontally next to eachother (display: inline-block).

Now, when I click on a button, I show those elements, that isn't an issue. This is done with the following HTML code:

<a href="#" onclick="$('#green').show();">Make contents 1 visible</a>
<a href="#" onclick="$('#red').show();">Make contents 2 visible</a><br/>
<a href="#" onclick="$('#yellow').show();">Make contents 3 visible</a>

When I want to put an animation on it, I can do it by adding a certain class to the element and the CSS would like this:

.animate { transition: all linear 5s; opacity: 1; display: inline-block; }

But now, let's mark the LI elements as absolute, so they are all displayed at the same location.

What I would like to have now as an animation is the following:

But, to make it difficult, neither of the items has a fixed with, because the content of the UL LI elements is dynamiccly.

Here's a fiddle to better understand it:

http://jsfiddle.net/dw4Lz8qe/

So, I would like to fade an item is, but if there's already an item visible, the visible item(s) should start moving to the right until the required space for the fading in element is fully taken.

So, I do hope that this question was clear.

Kind regards,

Upvotes: 2

Views: 3524

Answers (2)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

Animating font-size may solve your problem:

ul li {
  display: inline-block; 
  opacity: 0;
  font-size: 0px;
  transition: all linear 0.5s;
}

.green {background-color: green;}
.red {background-color: red;}
.yellow {background-color: yellow;}

.animate {
  opacity: 1;
  font-size: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="$('#green').toggleClass('animate') ">Toggle contents 1</button>
<button onclick="$('#red').toggleClass('animate')   ">Toggle contents 2</button>
<button onclick="$('#yellow').toggleClass('animate')">Toggle contents 3</button>

<ul class="padding: 0px; margin: 0px;">
  <li class="green" id="green">Contents 1</li>
  <li class="red" id="red">Contents 2</li>
  <li class="yellow" id="yellow">Contents 3</li>
</ul>

Upvotes: 2

connexo
connexo

Reputation: 56783

As long as your <li> can have a fixed with, it works with css. Check your updated fiddle - you might want to use that to dive deeper into the matter. Problem is, you cannot transition between width: 0 and width: autoas this is not supported by any browser I know of.

http://jsfiddle.net/dw4Lz8qe/1/

Upvotes: 1

Related Questions