让表行随着其类的变化而淡入？

Question

我有一个按钮被点击以显示表格行：

$(document).ready(function() {
  $("label.deathzone-toggle").click(function() {
    $("tr.deathzone").toggleClass("show");
  });
});

tr.deathzone td {
  display: none;
}

tr.deathzone.show td {
  display: table-cell;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label class="custom-control-label deathzone-toggle" for="customSwitches">Show Deathzone Inducements</label>

这一切都很好，但我正在尝试淡入/淡出行，我尝试过 fadeIn("slow");但它不起作用。我还尝试将transition:opacity 1.5s ease; 添加到css，但这也不起作用？卡住了！！

Answer 1

您不能像您希望的那样转换显示属性，但您可以转换会产生相同效果的不透明度？！

$(document).ready(function() {
  $("label.deathzone-toggle").click(function() {
    $("tr.deathzone").toggleClass("show");
  });
});

tr.deathzone td {
  display: table-cell;
  opacity:0;
  background:white;
  transition:ease-in-out all 250ms;
}

tr.deathzone.show td {
  opacity:1;
  display: table-cell;
  background:pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<label class="custom-control-label deathzone-toggle" for="customSwitches">Show Deathzone Inducements</label>

<table>
  <tr class='deathzone'>
    <td>.... some content</td>
  </tr>
</table>

Answer 2

而不是

tr.deathzone td {
  display: none;
}

tr.deathzone.show td {
  display: table-cell;
}

使用

  tr.deathzone td {
      opacity: 0;
      visibility: hidden;
      height: 0;
      transition: opacity 0.5s ease;

    }
   tr.deathzone.show td{
      opacity: 1;
      visibility: visible;
      height: auto;
    }

同样的jquery

$(document).ready(function() {
  $("label.deathzone-toggle").click(function() {
    $("tr.deathzone").toggleClass("show");
  });
});

Answer 3

只需使用 .fadeIn("slow") 将 "tr" 的显示属性更改为 none 而不是 "td"s。

tr.deathzone {
 display: none;
}

2 个例子：

https://jsfiddle.net/somidmm/03tn69kx/

function test() {$("#2").fadeToggle("slow");}

https://jsfiddle.net/somidmm/ad6bjh8c/

$(document).ready(function() {
 $("label.deathzone-toggle").click(function() {
  $("tr.deathzone").fadeToggle("slow");
  });
});