smooth transition on opening the lef panel and aligining the table automatically

user_13396628 0
Viewed 94

I am new to CSS. Below is my requirement. I need to open a left panel on the click of a button,

Below is the working example in codepen. https://codepen.io/angularjai/pen/eYgzXdy

table, th, td {
  border: 1px solid black;
}

#id {
  width:20%;
}
<html !DocType>
  <head>
    <title> Test </title>
  </head>
  <body>
    <button>Click Me</button>
    <hr>
    <div id=leftside>
      <p> Some contents here
    </div>
    <div >
      <table width=80%>
        <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>

      </table>
    </div>
  </body>
</html>

Requirement. I need to open a left side div. When opening and closing the transition should be smooth.

Please help

css
1 Answers

Here you go:

document
    .getElementById("button")
    .addEventListener("click", function openAndCloseSideBar() {
      if (
        document.getElementById("sidebar").className === "close-sidebar" ||
        document.getElementById("sidebar").className === "sidebar"
      )
        document.getElementById("sidebar").className = "open-sidebar";
      else document.getElementById("sidebar").className = "close-sidebar";
    });
table,
  th,
  td {
    border: 1px solid black;
  }

  #id {
    width: 20%;
  }

  .main {
    display: flex;
  }

  .sidebar {
    background-color: gray;
    transform: translate(-150%);
  }

  .open-sidebar {
    background-color: gray;
    animation: open-animation 2s forwards;
  }

  .close-sidebar {
    background-color: gray;
    animation: close-animation 2s forwards;
  }

  @keyframes open-animation {
    from {
      transform: translateX(-150%);
    }

    to {
      transform: translateX(0);
    }
  }

  @keyframes close-animation {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-150%);
    }
  }
<!DOCTYPE html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <div class="main">
      <div id="sidebar" class="sidebar">Side bar</div>
      <div>
        <button id="button">Click Me</button>
        <hr />
        <div id="leftside"></div>
        <div>
          <table width="80%">
            <tr>
              <th>Firstname</th>
              <th>Lastname</th>
              <th>Age</th>
            </tr>
            <tr>
              <td>Jill</td>
              <td>Smith</td>
              <td>50</td>
            </tr>
            <tr>
              <td>Eve</td>
              <td>Jackson</td>
              <td>94</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </body>
</html>

Essentially, I'm adding a class each time that the button is clicked, and the class has an animation at the start of it, which hides and shows the sidebar.

There are many other ways which you could implement this too, possibly with flex if you would like the right section to animate as well.

user_128328670
Related