javascript - 动画切换列

Question

我有一个包含表格的 HTML 页面，其中有三列，分别是 display:none 和 visibility:hidden。单击相邻列中的单元格时，属性分别更改为 table-cell 和 visible，显示三列。再次单击所述相邻列的单元格会将值重置为无和隐藏。

唯一的问题是，当然，它看起来并不令人愉快。我想包含一个动画，以便我可以看到其他列缩小，以便让隐藏的列在中间滑动，并在我可以做相反的事情时添加一个动画。

我应该使用什么？我寻求帮助是因为我对网页设计还比较陌生，而且我不知道在哪里寻找指导。

Answer 1

表格本身没有动画。也许这个选项适合您。 (谷歌翻译。)​​

$('.show').on('click', function(){
	$('.table').find('.td').each(function(){
  	if($(this).css('display') === 'none'){
    	$(this).show().addClass('animate');
    }
  });
});

.table{
  display: flex;
  flex-direction: column;
}

.td{
  border: 1px solid #999;
  border-collapse: collapse;
}

.tr{
  display: flex;
}

.td{
  padding: 10px;
}
.td:nth-of-type(2){
  display: none;
}
*{
  transition: all 0.3s ease;
}
button{
  margin-top: 20px;
}
.animate{
  animation: show 1s ease forwards;
}
@keyframes show{
  from{
    transform: translateX(-100%);
    display: block;
  }
  to{
    transform: translateX(0%);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table">
  <div class="tr">
    <div class="td">1</div>
    <div class="td">2</div>
    <div class="td">3</div>
  </div>
  <div class="tr">
    <div class="td">1</div>
    <div class="td">2</div>
    <div class="td">3</div>
  </div>
  <div class="tr">
    <div class="td">1</div>
    <div class="td">2</div>
    <div class="td">3</div>
  </div>
</div>

<button class="show">Show</button>