Bootstrap Collapse на строке таблицы не анимирован

Question

Я создал таблицу с начальной загрузкой 4, как это

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="card-body justify-content-center">
  <p><a class="btn btn-primary collapsed" data-toggle="collapse" href="#collapseProduct" role="button" aria-expanded="false" aria-controls="collapseProduct">Animate div</a><button class="btn btn-primary collapsed" type="button" data-toggle="collapse" data-target="#collapseProduct0"
      aria-expanded="false" aria-controls="collapseProduct0">Animate tr</button></p>
  <div class="collapse" id="collapseProduct" style="">
    <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
  </div>
  <table class="table table-hover">
    <tbody>
      <tr>
        <th>Name</th>
        <th>Description</th>
        <th>Product Group</th>
        <th class="text-center">Taxable</th>
        <th class="text-center">Tax Included</th>
        <th></th>
      </tr>
      <tr>
        <td>Bitwolf</td>
        <td>Focused value-added access</td>
        <td>Sepatu Futsal</td>
        <td class="text-center"><i class="fa fa-times text-danger"></i></td>
        <td class="text-center"><i class="fa fa-check text-info"></i></td>
        <td>
          <div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary collapsed" data-toggle="collapse" data-target="#collapseProduct0" aria-expanded="false" aria-controls="collapseProduct0"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
              data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
        </td>
      </tr>
      <tr class="collapse" id="collapseProduct0" style="">
        <td colspan="6">
          <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
        </td>
      </tr>
      <tr>
        <td>Keylex</td>
        <td>Focused client-driven groupware</td>
        <td>gtr</td>
        <td class="text-center"><i class="fa fa-times text-danger"></i></td>
        <td class="text-center"><i class="fa fa-times text-danger"></i></td>
        <td>
          <div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary collapsed" data-toggle="collapse" data-target="#collapseProduct1" aria-expanded="false" aria-controls="collapseProduct1"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
              data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
        </td>
      </tr>
      <tr class="collapse" id="collapseProduct1" style="">
        <td colspan="6">
          <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
        </td>
      </tr>
      <tr>
        <td>Cardguard</td>
        <td>Realigned zero defect policy</td>
        <td>Sepatu Futsal</td>
        <td class="text-center"><i class="fa fa-times text-danger"></i></td>
        <td class="text-center"><i class="fa fa-check text-info"></i></td>
        <td>
          <div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct2" aria-expanded="false" aria-controls="collapseProduct2"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
              data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
        </td>
      </tr>
      <tr class="collapse" id="collapseProduct2">
        <td colspan="6">
          <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
        </td>
      </tr>
      <tr>
        <td>Temp</td>
        <td>Monitored zero defect groupware</td>
        <td>Sepatu Bola</td>
        <td class="text-center"><i class="fa fa-check text-info"></i></td>
        <td class="text-center"><i class="fa fa-times text-danger"></i></td>
        <td>
          <div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct3" aria-expanded="false" aria-controls="collapseProduct3"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
              data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
        </td>
      </tr>
      <tr class="collapse" id="collapseProduct3">
        <td colspan="6">
          <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
        </td>
      </tr>
      <tr>
        <td>Zontrax</td>
        <td>User-friendly multimedia interface</td>
        <td>gtr</td>
        <td class="text-center"><i class="fa fa-times text-danger"></i></td>
        <td class="text-center"><i class="fa fa-check text-info"></i></td>
        <td>
          <div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct4" aria-expanded="false" aria-controls="collapseProduct4"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
              data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
        </td>
      </tr>
      <tr class="collapse" id="collapseProduct4">
        <td colspan="6">
          <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
        </td>
      </tr>
      <tr>
        <td>Andalax</td>
        <td>Assimilated global forecast</td>
        <td>gtr</td>
        <td class="text-center"><i class="fa fa-check text-info"></i></td>
        <td class="text-center"><i class="fa fa-check text-info"></i></td>
        <td>
          <div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct5" aria-expanded="false" aria-controls="collapseProduct5"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
              data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
        </td>
      </tr>
      <tr class="collapse" id="collapseProduct5">
        <td colspan="6">
          <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
        </td>
      </tr>
      <tr>
        <td>Domainer</td>
        <td>Future-proofed intangible focus group</td>
        <td>Sepatu Bola</td>
        <td class="text-center"><i class="fa fa-times text-danger"></i></td>
        <td class="text-center"><i class="fa fa-times text-danger"></i></td>
        <td>
          <div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct6" aria-expanded="false" aria-controls="collapseProduct6"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
              data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
        </td>
      </tr>
      <tr class="collapse" id="collapseProduct6">
        <td colspan="6">
          <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

но кажется, что когда мы включаем класс «коллапс», он будет действовать иначе, чем если бы мы надели класс.Как вы можете видеть, если мы нажимаем animate div, целевой div будет плавно анимироваться, но когда мы нажимаем animate tr, tr не является animate, как я могу анимировать tr так?я провел свое исследование, но не нашел удовлетворительного ответа

Answer 1

Вместо tr class="collapse" id="collapseProduct0" на tr ... я просто передал его новому div, который теперь покрывает <div class="card card-body">... </div>; Выполнение этого оставило отступ (от начальной загрузки) - чтобы избавиться от этого заполнения, мы ввели новый класс, который гарантировал, что когда строка находится в свернутом состоянии, там ничего нет.

Ниже код должен получить то, что вы ищете ...

.collapseContainingDiv td {
  padding: 0 !important;
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="card-body justify-content-center">
  <p><a class="btn btn-primary collapsed" data-toggle="collapse" href="#collapseProduct" role="button" aria-expanded="false" aria-controls="collapseProduct">Animate div</a><button class="btn btn-primary collapsed" type="button" data-toggle="collapse" data-target="#collapseProduct0"
      aria-expanded="false" aria-controls="collapseProduct0">Animate tr</button></p>
  <div class="collapse" id="collapseProduct" style="">
    <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
  </div>
  <table class="table table-hover">
    <tbody>
      <tr>
        <th>Name</th>
        <th>Description</th>
        <th>Product Group</th>
        <th class="text-center">Taxable</th>
        <th class="text-center">Tax Included</th>
        <th></th>
      </tr>
      <tr>
        <td>Bitwolf</td>
        <td>Focused value-added access</td>
        <td>Sepatu Futsal</td>
        <td class="text-center"><i class="fa fa-times text-danger"></i></td>
        <td class="text-center"><i class="fa fa-check text-info"></i></td>
        <td>
          <div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary collapsed" data-toggle="collapse" data-target="#collapseProduct0" aria-expanded="false" aria-controls="collapseProduct0"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
              data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
        </td>
      </tr>
      <tr class="collapseContainingDiv">
        <td colspan="6">
          <div class="collapse" id="collapseProduct0" style="">
            <div class="card card-body">SECOND Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
          </div>
        </td>
      </tr>
      <tr>
        <td>Keylex</td>
        <td>Focused client-driven groupware</td>
        <td>gtr</td>
        <td class="text-center"><i class="fa fa-times text-danger"></i></td>
        <td class="text-center"><i class="fa fa-times text-danger"></i></td>
        <td>
          <div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary collapsed" data-toggle="collapse" data-target="#collapseProduct1" aria-expanded="false" aria-controls="collapseProduct1"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
              data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
        </td>
      </tr>
      <tr class="collapse" id="collapseProduct1" style="">
        <td colspan="6">
          <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
        </td>
      </tr>
      <tr>
        <td>Cardguard</td>
        <td>Realigned zero defect policy</td>
        <td>Sepatu Futsal</td>
        <td class="text-center"><i class="fa fa-times text-danger"></i></td>
        <td class="text-center"><i class="fa fa-check text-info"></i></td>
        <td>
          <div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct2" aria-expanded="false" aria-controls="collapseProduct2"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
              data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
        </td>
      </tr>
      <tr class="collapse" id="collapseProduct2">
        <td colspan="6">
          <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
        </td>
      </tr>
      <tr>
        <td>Temp</td>
        <td>Monitored zero defect groupware</td>
        <td>Sepatu Bola</td>
        <td class="text-center"><i class="fa fa-check text-info"></i></td>
        <td class="text-center"><i class="fa fa-times text-danger"></i></td>
        <td>
          <div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct3" aria-expanded="false" aria-controls="collapseProduct3"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
              data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
        </td>
      </tr>
      <tr class="collapse" id="collapseProduct3">
        <td colspan="6">
          <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
        </td>
      </tr>
      <tr>
        <td>Zontrax</td>
        <td>User-friendly multimedia interface</td>
        <td>gtr</td>
        <td class="text-center"><i class="fa fa-times text-danger"></i></td>
        <td class="text-center"><i class="fa fa-check text-info"></i></td>
        <td>
          <div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct4" aria-expanded="false" aria-controls="collapseProduct4"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
              data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
        </td>
      </tr>
      <tr class="collapse" id="collapseProduct4">
        <td colspan="6">
          <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
        </td>
      </tr>
      <tr>
        <td>Andalax</td>
        <td>Assimilated global forecast</td>
        <td>gtr</td>
        <td class="text-center"><i class="fa fa-check text-info"></i></td>
        <td class="text-center"><i class="fa fa-check text-info"></i></td>
        <td>
          <div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct5" aria-expanded="false" aria-controls="collapseProduct5"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
              data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
        </td>
      </tr>
      <tr class="collapse" id="collapseProduct5">
        <td colspan="6">
          <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
        </td>
      </tr>
      <tr>
        <td>Domainer</td>
        <td>Future-proofed intangible focus group</td>
        <td>Sepatu Bola</td>
        <td class="text-center"><i class="fa fa-times text-danger"></i></td>
        <td class="text-center"><i class="fa fa-times text-danger"></i></td>
        <td>
          <div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct6" aria-expanded="false" aria-controls="collapseProduct6"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
              data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
        </td>
      </tr>
      <tr class="collapse" id="collapseProduct6">
        <td colspan="6">
          <div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>