Question

我下面有2 table-cells。一个是隐藏的，另一个不是：

<table>
  <tbody>
    <td class="mobile-caller-pos" style="width:100%; height:50px; background:blue;">Content 1</td>
    <td class="mobile-caller-pos-dark" style="width:100%; height:50px; background: red; diplay:none">Content 2</td>
  </tbody>
</table>

我有简单的jquery，因此当点击mobile-caller-pos-dark时，它会隐藏并显示mobile-caller-pos-dark：

$(document).on('click', '.mobile-caller-pos', function(t) {
  var $this = $(this);
  $this.hide();
  $this.siblings('.mobile-caller-pos-dark').show();
});

如何使用CSS3（或jQyery）转换，以便mobile-caller-pos-dark显示从mobile-caller-pos顶部向右滑动，而不是即时显示？

Answer 1

.show()和.hide()会影响CSS中的display属性并且无法设置动画

话虽如此，有几种方法可以做到这一点。第一个是从第一个元素中删除宽度/填充/边距：

$(document).on('click', '.mobile-caller-pos', function (t) {
    var $this = $(this);
    $this.empty().css({"width":"0","margin":"0", "padding":"0"});
});

Demo

第二个是使用position:absolute

从左侧滑动第二个元素

$(document).on('click', '.mobile-caller-pos', function (t) {
    var $this = $(this);
    $this.siblings('.mobile-caller-pos-dark').css({"display":"block"});
    setTimeout(function() { $this.siblings('.mobile-caller-pos-dark').css({"left":"0"}); },0);
});

Demo

您还可以使用right:0将红色的宽度设置为0到100％，使用position:absolute; left:-100%和其他许多选项将蓝色滑动到左侧。您可以check here获取更多解释

如何将CSS3动画应用于表格单元格

1 个答案: