Question

当我将鼠标悬停在表格行上时，它会自动展开信息元素但是当你盘旋时，它会突破扩展。

如何让它平稳地过渡高度？

function sortElements() {
  $(".main table tr[day]").each(function() {
    var $this = $(this)
    var $nextEl = $this.next();
    $this.insertAfter($this.parent().find("#" + $this.attr("day")));
    $nextEl.insertAfter($this)
  });
}

sortElements();

body {
  font-family: "Roboto";
  padding: 0px;
  margin: 0px;
  background-color: #dddcdc;
}

p {
  display: inline;
}

.logo {
  display: inline-block;
  width: 120px;
  margin-top: 10px;
  margin-right: 0px;
  margin-left: 75px;
  font-weight: bold;
  color: #ff0808;
  font-size: 28px;
}

.logo a {
  text-decoration: none;
  color: red;
}

.logo a:hover {
  color: #e20505;
}

.navbar {
  background-color: #e7e6e6;
  box-shadow: 1px 1px 7px #5c5c5c;
  /* x, distance */
  margin: 0px;
  height: 52px;
}

.navbar-links {
  display: inline;
}

.navbar-links p a {
  margin: 0px 0px 0px 65px;
  padding: 0px;
  display: inline;
  font-weight: bold;
  text-transform: uppercase;
  color: #5c5c5c;
  font-size: 18px;
  text-decoration: none;
}

p a:hover {
  padding-bottom: 6px;
  border-bottom: 2px solid #f87531;
}

div p .orange-btn {
  position: relative;
  bottom: 5px;
  left: 230px;
  border: 1px solid #f87531;
  border-radius: 5px;
  color: white;
  margin-bottom: 5px;
  font-size: 13px;
  padding: 12px;
  background-color: #f87531;
}

div p .orange-btn:hover {
  background-color: #e06f35;
}

.main {
  box-shadow: 0 4px 2px -4px #5c5c5c;
  margin: 60px 66px;
  background-color: #f2f2f2;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-top: none;
  border-left: none;
  border-right: none;
}

th,
td {
  /*border-left: none;*/
  /*border-right: none;*/
  padding: 4px 0px;
  width: 33%;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  border-color: black;
}

th {
  font-size: 20px;
  padding: 5px;
  font-weight: bolder;
}

tbody tr:hover {
  background-color: #f87531;
  cursor: default;
  color: white;
}

.day {
  width: 99%;
  color: #5c5c5c;
  text-align: center;
  font-weight: 900;
  font-size: 25px;
  letter-spacing: 2px;
  background-color: #dddcdc;
}

.airing {
  background-color: #16c966;
}

.info {
  height: 0px;
  overflow: hidden;
}

tr+tr.info {
  color: #5c5c5c;
  visibility: collapse;
  height: 0px;
  transition: height 0.3s linear, opacity 1.3s linear;
}

tr:hover+tr.info {
  border: 1px solid #f87531;
  height: 100px;
  opacity: 1;
  visibility: visible;
  display: table-row;
}

.info:hover {
  color: #5c5c5c;
  background-color: #f2f2f2;
  height: 100px;
  opacity: 1px;
  visibility: visible;
  display: table-row;
  border: 1px solid #f87531;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border="1" frame="above">
  <thead>
    <tr>
      <th>Show name</th>
      <th>Season | Episode</th>
      <th>Day of Return</th>
    </tr>
  </thead>

  <tbody>
    <tr id="monday">
      <td class="day" colspan="3">
        Monday
      </td>
    </tr>

    <tr id="tuesday">
      <td class="day" colspan="3">
        Tuesday
      </td>
    </tr>

    <tr id="wednesday">
      <td class="day" colspan="3">
        Wensday
      </td>
    </tr>

    <tr id="thursday">
      <td class="day" colspan="3">
        Thursday
      </td>
    </tr>

    <tr id="friday">
      <td class="day" colspan="3">
        Friday
      </td>
    </tr>
    <tr class="airing" day="monday">
      <td>Arrow</td>
      <td>Season 5 | Episode 10</td>
      <td>3/14/18</td>
    </tr>

    <tr class="info">
      <td colspan="3">show info hereshow info hereshow info hereshow info hereshow info hereshow info hereshow info hereshow info hereshow info hereshow info hereshow info hereshow info hereshow info hereshow info here</td>
    </tr>

    <!--  -->
    <tr class="airing" day="monday">
      <td>test1</td>
      <td>Test2</td>
      <td>Test3</td>
    </tr>

    <tr class="info">
      <td colspan="3">show info here</td>
    </tr>
    <!--  -->


    <tr day="tuesday">
      <td>arrow</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr class="info">
      <td colspan="3">show info here</td>
    </tr>

  </tbody>
</table>

View on JSFiddle

Answer 1

由于display和visibility不接受transition，您需要从css中删除它并添加line-height属性。

用当前的

替换以下css

tr+tr.info {
  color: #5c5c5c;
  /*visibility: collapse;*/
  height: 0px;
  transition: height 0.3s linear,line-height 0.3s linear, opacity 0.5s linear;
  opacity: 0;
  line-height: 0;
}
tr:hover+tr.info {
  border: 1px solid #f87531;
  height: 100px;
  opacity: 1;
  line-height: 1;
 /* visibility: visible;
  display: table-row;*/
}

另外添加这个

tr+tr.info > td {
    padding: 0;
}

表格行的过渡高度

1 个答案: