1

Here's the scenario: I have four elements overlapping one an other in a parent element, something like this:

<body class="one">
    <div id="overlapping">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
    </div>
    ...

The CSS looks a little like this:

.one, .two, .three, .four { display: none; }
body.one .one,
body.two .two,
body.three .three,
body.four .four {
    display: block;
}

Then there's some javascript and some buttons to switch the class on 'body'.

This works great, except that I'd like to use a css transition to switch between the blocks. They are of uneven (and unknown) height, so I can't animate on height. I'd rather not hardcode any widths for responsive reasons, and transitions don't work on display yet.

I can't animate on visibility or opacity because the overlapped elements continue to take up space in the layout while hidden or transparent: i.e. they aren't truly overlapping unless the invisible ones have display: none.

(One working solution would be css to position all elements at the top left of #overlapping, obeying normal text-wrapping rules, on top of each other, such that #overlapping expands to hold them as if they weren't position: absolute. I've found no such method as of yet.)

So how do I animate the switch? Is there a way with CSS, or do I have to resort to js animations?

3
  • I know that the first one is #overlapping > div, but I wanted to be more explicit in the question. As for the second one, I don't think you're correct: the .one class is on the body, not #overlapping, because there are other elements in the body that also transition.
    – So8res
    Mar 15, 2012 at 4:18
  • ...Because .three is only supposed to display when body also has .three. Similarly for one, two, and four. There's no way to compress them all into one binary displayToggle class. I don't know an easier way to do it than what I wrote above.
    – So8res
    Mar 15, 2012 at 4:42
  • Because the elements take up space while transparent, and you end up with the overlapped elements all stacked up.
    – So8res
    Mar 15, 2012 at 5:42

2 Answers 2

0

The best solution I have found so far is as follows (less syntax):

body {
  #overflow > div
    height: 0;
    opacity: 0;
  }

  &.one .one,
  &.two .two,
  &.three .three,
  &.four .four {
    height: 100%;
    opacity: 1;
  }
}

#overflow {
  overflow: hidden;
  div {
    transition: height .9s;
    transition: opacity .9s;
    overflow: hidden;
    display: block;
  }
}

It happens to work because all of my inner divs are the same (albeit variable) height. I'd still like a general solution, but nobody seems to know one.

0

I believe there are a few animations possible in css3 but I think its better to use JQuery

google jQuery API .animate

$(".one").animate({opacity: 0.4, display: "block"} , 1500);

$(".two").animate({opacity: 0.4, display: "none"} , 1500);

toy around abit with what your changing...

it might also help to set the div's postion to relative in order to overlap better

I hope it helps, if not tell me what else you need

1
  • Thanks. I was looking for a non-jquery solution. I was able to work around the problem with the solution below, and by tweaking the markup such that height:100% is desirable. This happens to work for me because all of my overlapping elements share a height, but it's still not a general solution.
    – So8res
    Mar 20, 2012 at 18:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.