CODEWITHSUNDEEP
css-transitions
Turner Hayes
Turner Hayes

Reputation: 1944

Slide transition using CSS

I have a particular transition I'm trying to implement: there's basically three sections: a fixed-width vertical navigation bar on the left, a collapsible section next to that, and the remainder of the page. When you click an icon in the nav bar, the left panel toggles open/close. The transition should make the left panel "slide" under the nav bar.

So we simply animate the left property, right? Well..no. The position is changed, but it still has the same width, so it's affecting the right side in the same way.

I also tried some other stuff, like animating the right side instead, but they ended up requiring the use of calc() in animations, which IE does not support.

Long story short, I got a prototype working. The catch is that it depends on the vw unit. From caniuse.com and my testing in our supported browsers (basically, IE10+, recent versions of Chrome and Safari), it appears to work fine, and it's apparently in Candidate Reccommendation status, but I'm a little hesistant to rely on something that's so new for a production site.

So basically, I have a couple of questions:

Upvotes: 3

Views: 1534

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25954

If you use the checkbox hack you don't need any javascript, viewport units, or calc at all! It requires that you change your markup and CSS a little to compensate

<!-- Changed HTML -->
<!-- The only thing you need to change is to surround the `ul` in a label and 
     add a corresponding input for it -->
<input type="checkbox" id="toggle-1" />
<label for="toggle-1">
  <ul class="chart-tabs">
    <li>Chart</li>
    <li>Tabs</li>
  </ul>
</label>

/* Changed CSS */
.chart-tabs {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.left-content {
  width: 33%;
  background: blue;
  color: white;
  position: relative;
  height: 100%;
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
  z-index: 1;

  .section {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    background-color: orange;
  }
}

/* CSS to add */
label[for='toggle-1'] {
  display: inline-block;
  background: red;
  width: 54px;
  height: 100%;
  z-index: 2;
}    
#toggle-1 {
   position: absolute;
   top: -9999px;
   left: -9999px;
}    
#toggle-1:checked ~ .left-content { margin-left:-33%; }

Demo

My method allows % to be used instead of vw, but you could use viewport units depending on how far back you want to reach. All current major browsers support it

Upvotes: 3

Related Questions