CODEWITHSUNDEEP
javascriptcsstypescriptanimationsass
Bob
Bob

Reputation: 477

Hide the vertical scrollbar only during the animation of table data

Currently, I have a table (stackblitz example) which fades in from bottom to top. While it happens there is a scrollbar visible as the table height increases when fading in and height decreases so it hides it after the animation.

   .table-data {
      border: 1px solid;
      height: 400px;
      overflow: auto;
    }

I want this

overflow to be auto

as there can be cases where the data in the table is longer enough for the scrollbar to be visible.

Is there a way we can do it in TypeScript?

Where I can hide overflow during the animation only, using:

.ease-in-up {
  animation: fadeInUp 5s;
  **overflow: hidden;**
}

HTML:

<div class="table-data">
  <table class="ease-in-up">
    <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>
    <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>
    <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>
    <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><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><tr>
      <th>Firstname</th>
      <th>Lastname</th> 
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td> 
      <td>50</td>
    </tr>
  </table>
</div>

CSS:

.ease-in-up {
  animation: fadeInUp 5s;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.table-data {
  border: 1px solid;
  height: 400px;
  overflow: auto;
}

Upvotes: 0

Views: 155

Answers (1)

Leo
Leo

Reputation: 158

Try this

p {
  font-family: Lato;
}
.ease-in-up {
  animation: fadeInUp 5s;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes hiddenState {
  0% {
    overflow: hidden;
  }

  100% {
    overflow: auto;
  }
}

.table-data {
  border: 1px solid;
  height: 400px;
  overflow: auto;
  animation: hiddenState 5s;
}

Upvotes: 2

Related Questions