1

This was originally for transitioning two properties at different speeds but was informed you can't transition overflow. So now I'm just asking how to stop overflow auto from displaying the scroll bars during height transition. The original post is below.

I want to transition the height and width of a content box at 0.3s but want the overflow-y at 1s or delay then same. I'm mostly trying to make it so that when the transition takes place the scroll bars don't flash from there to not.

.barOpen {
  -webkit-transition: height 0.3s ease-out
  height: 225px
  width: 98.5%
  margin: 0.25%
  padding: 0.5%
  background-color: #28251f
  color: white
  opacity: 1
  overflow-x: hidden
  overflow-y: auto
  float: left
 }
.barClose {
  -webkit-transition: height 0.3s ease-out
  width: 100%
  background-color: #d79e12
  height: 0
  overflow-x: hidden
  overflow-y: hidden
  float: left
 }
aintnorest
  • 1,326
  • 2
  • 13
  • 20
  • 2
    `overflow` is not animatable, so the question does not compute. – Jon Jan 27 '14 at 19:12
  • possible duplicate of [How to have multiple CSS transitions on an element?](http://stackoverflow.com/questions/7048313/how-to-have-multiple-css-transitions-on-an-element) – Vincenzo Maggio Jan 27 '14 at 19:13
  • Thanks Danko for the edit on formatting. I noticed I didn't do it and went to edit it and didn't do it faster then Danko. Jon thats anouying I'll need to find another way. Zach I use Sass and originally the formating is just the .class return two space no semicolons. It works for sass no problem. – aintnorest Jan 27 '14 at 19:14
  • 1
    Side note: You have to have semicolons at the end of your lines – Zach Saucier Jan 27 '14 at 19:14

1 Answers1

3

Overflow is not animatable, but you can use container with overflow: hidden and apply transitions to that container.

.barContainer {
  -webkit-transition: height 0.3s ease-out;
  width: 100%;
  overflow: hidden;
  float: left;
}

.barContainerOpen {
  background-color: #28251f;
  height: 225px;
}

.barContainerClose {
  background-color: #d79e12;
  height: 225px;
}

.bar {
  height: 225px;
  width: 98.5%;
  margin: 0.25%;
  padding: 0.5%;
  background-color: #28251f;
  color: white;
  opacity: 1;
  overflow-x: hidden;
  overflow-y: auto;
 }

Simplified Jsfiddle

Roman G.
  • 182
  • 12