主页 / 问题 / 1003358
Accepted
Виктор Тюрин
Asked:2020-07-16 18:29:52 +0000 UTC2020-07-16 18:29:52 +0000 UTC

Vue js如何让表格滑动顺畅

  • 772

vue.js怎么做：有一个按钮，有一个表格，需要点击按钮时，表格高度平滑隐藏，再次点击时，高度平滑出现。

.show-catalog-enter-active {
  transition: all 1s;
}

.show-catalog-leave-active {
  transition: all 1s;
}

.show-catalog-enter {
  height: 0;
}

.show-catalog-leave-to {
  height: 0;
}

当以平滑的消失和外观包裹桌子时<transition>，没有。一秒钟后，该块简单地消失并相应地出现。

vue.js

1 个回答

  1. Best Answer

    作为备选：

    new Vue({
  el: '#root',
  data() {
    return {
      show: false
    };
  }
});
    .slide-fade-enter-active {
  transition: all 1s ease-in-out;
}

.slide-fade-leave-active {
  transition: all 0.5s ease;
}

.slide-fade-enter,
.slide-fade-leave-to
/* .slide-fade-leave-active до версии 2.1.8 */

{
  transform: translateY(-50px);
  opacity: 0;
}

table {
  border-collapse: collapse;
}

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
  margin-top: 2rem;
}

.table td,
.table th {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}

.table thead th {
  vertical-align: bottom;
  padding: 0.75rem;
  border-bottom: 2px solid #dee2e6;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

<div class="hello" id="root">
  <button v-on:click="show = !show">Переключить</button>
  <transition name="slide-fade">
    <table v-if="show" class="table">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">First</th>
          <th scope="col">Last</th>
          <th scope="col">Handle</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
  </transition>
</div>

    选项 2与高度：

    new Vue({
  el: '#root',
  data() {
    return {
      show: false
    };
  }
});
    .slide-enter-active {
  transition-duration: 1s;
  transition-timing-function: ease-in;
}

.slide-leave-active {
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}

.slide-enter-to,
.slide-leave {
  max-height: 300px;
  overflow: hidden;
}

.slide-enter,
.slide-leave-to {
  overflow: hidden;
  max-height: 0;
}

table {
  border-collapse: collapse;
}

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
  margin-top: 2rem;
}

.table td,
.table th {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}

.table thead th {
  vertical-align: bottom;
  padding: 0.75rem;
  border-bottom: 2px solid #dee2e6;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

<div class="hello" id="root">
  <button v-on:click="show = !show">Переключить</button>

  <transition name="slide">
    <div v-if="show">
      <table class="table">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>
  </transition>
</div>

    • 4

相关问题