Question

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

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

我应该使用什么？我正在寻求帮助，因为我是网页设计的新手，而且我也不知道在哪里寻找指导。

Answer 1

表格本身没有动画。也许此选项可能适合您。（Google翻译。）

$('.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>

Answer 2

当我完成发布问题时，我的一个朋友向我介绍了使用JQuery可用的fadeToggle函数。这正是我想要的。

动画切换列

2 个答案: