ferret13 Posts - Answer Overflow

ferret13

•Created by ferret13 on 12/8/2024 in #front-end

Show and Hide table row with animations

Have been struggling for a couple of days now trying to implement animations on showing and hiding table row.... Animation is working on the show keyframe. Code sample;

tr.row-hidden {
  display: none;
  opacity: 0;

  animation: hide 2s;
}

tr {
  display: table-row;
  opacity: 1;

  animation: show 1s;
}

@keyframes show {
  from {
    display: none;
    opacity: 0;
  }
  to {
    display: table-row;
    opacity: 1;
  }
}

@keyframes hide {
  from {
    display: table-row;
    opacity: 1;
  }
  to {
    display: none;
    opacity: 0;
  }
}

tr.row-hidden {
  display: none;
  opacity: 0;

  animation: hide 2s;
}

tr {
  display: table-row;
  opacity: 1;

  animation: show 1s;
}

@keyframes show {
  from {
    display: none;
    opacity: 0;
  }
  to {
    display: table-row;
    opacity: 1;
  }
}

@keyframes hide {
  from {
    display: table-row;
    opacity: 1;
  }
  to {
    display: none;
    opacity: 0;
  }
}

Any assistance would be appreciated.

29 replies

Gaming

Programming