CODEWITHSUNDEEP
jqueryhtmlcsscss-transitionstransition
Jay
Jay

Reputation: 1678

Issues with CSS Transitions

I'm trying to create a simple slide in and out menu using CSS transitions for a smooth effect. The menu moves from the left hand side to the top of the screen depending on the size of the window.

It works fine, but when I resize the browser window from large to small when the menu is open. There's a weird effect when the menu resizes itself.

I can't for the life of me work out how to get around it or what i'm doing wrong.

JSFiddle

$('#menu-button').click(function() {
  $('#menu').toggleClass('closed');
});
#wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  height: 100vh;
  background: #eeeeee;
}

#menu-wrapper {
  grid-column: 1;
  border-right: 1px solid #444444;
}

#menu {
  width: 300px;
  transition: width 1s;
}

#menu.closed {
  width: 50px;
}

#menu-button {
  width: 50px;
  height: 50px;
  float: right;
}

.bar {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
}

#content-wrapper {
  grid-column 2;
}

@media all and (max-width: 900px) {
  #wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto 100%;
  }
  #menu-wrapper {
    grid-row: 1;
    grid-column: 1;
    border-bottom: 1px solid;
    border-right: none;
  }
  #menu {
    width: 100%;
    height: 100px;
    transition: height 1s;
  }
  #menu.closed {
    height: 50px;
  }
  #content-wrapper {
    grid-column: 1;
    grid-row: 2;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="menu-wrapper">
    <div id="menu">
      <div id="menu-button">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>
    </div>
  </div>
  <div id="content-wrapper">
    <div id="content">
    </div>
  </div>
</div>

Upvotes: 0

Views: 48

Answers (1)

Temani Afif
Temani Afif

Reputation: 272572

Move the border to the inner element (where you apply the transition) to avoid that glitch then adjust some of the CSS:

$('#menu-button').click(function() {
  $('#menu').toggleClass('closed');
});
#wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  height: 100vh;
  background: #eeeeee;
}

#menu-wrapper {
  grid-column: 1;
}

#menu {
  width: 300px;
  height: 100%; /*added*/
  transition: width 1s;
  border-right: 1px solid #444444; /*added*/
}

#menu.closed {
  width: 50px;
}

#menu-button {
  width: 50px;
  height: 50px;
  float: right;
}

.bar {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
}

#content-wrapper {
  grid-column 2;
}

@media all and (max-width: 900px) {
  #wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto 100%;
  }
  #menu-wrapper {
    grid-row: 1;
    grid-column: 1;
    border-right: none;
  }
  #menu {
    width: 100%;
    height: 100px;
    border-right:none; /*added*/
    border-bottom: 1px solid; /*added*/
    transition: height 1s;
  }
  #menu.closed {
    height: 50px;
    width:100%; /*added*/
  }
  #content-wrapper {
    grid-column: 1;
    grid-row: 2;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="menu-wrapper">
    <div id="menu">
      <div id="menu-button">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>
    </div>
  </div>
  <div id="content-wrapper">
    <div id="content">
    </div>
  </div>
</div>

Upvotes: 1

Related Questions