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

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 似乎从右侧滑入，在 移动来电位置?

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更多解释