Скользящая анимация для подстрок в таблице

Question

Я хочу добавить скользящую анимацию для подстрок внутри структуры таблицы.При использовании div tag внутри table он не работает как div вне структуры table.Анимация отсутствует, и она форматирует каждые sub td в первой td родительской строки.

Исходный код - здесь пример StackBlitz

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr (click)="show = !show">
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>

<ng-container *ngIf="show">
  <div class="box" [class.opened]="show">
  <tr>
    <td>Sam</td>
    <td>Sample</td> 
    <td>35</td>
  </tr>
  <tr>
  <tr>
    <td>Piet</td>
    <td>Miller</td> 
    <td>42</td>
  </tr>

  </div>

</ng-container>

  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>


<div style="margin-top: 20px" class="box" [class.opened]="show">
    Here the animation is working proper.  <br> <br>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque ornare aenean euismod elementum nisi quis eleifend. Vivamus at augue eget arcu dictum. Dui sapien eget mi proin sed libero enim sed faucibus. Justo laoreet sit amet cursus sit amet dictum sit. Varius sit amet mattis vulputate. Lorem ipsum dolor sit amet consectetur adipiscing elit. Convallis tellus id interdum velit laoreet id donec ultrices. Tempus urna et pharetra pharetra massa massa. Tempor commodo ullamcorper a lacus vestibulum sed arcu non odio. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Semper auctor neque vitae tempus quam pellentesque nec nam. Mauris nunc congue nisi vitae suscipit tellus mauris. Eget magna fermentum iaculis eu. Mi in nulla posuere sollicitudin. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque. Nam libero justo laoreet sit amet. Aliquam faucibus purus in massa. Velit ut tortor pretium viverra suspendisse potenti nullam ac.
</div>

CSS

 .box {
        background-color: #FFCC55;
        max-height: 0px;
        overflow-y: hidden;
        transition: ease-in-out 400ms max-height;
    }

    .box.opened {
        max-height: 500px;
        transition: ease-in-out 600ms max-height;
    }

Answer 1

Возможно, вам нужно использовать свойство css, анимацию вместо перехода.

Я отредактировал ваш стек

https://stackblitz.com/edit/minimum-angular-code-for-a-transition-vyt4ek

Answer 2

Пожалуйста, обратитесь к приведенному ниже URL-адресу для получения полной ссылки на ваше расширяемое представление таблицы (@FanaticTyp).

https://datatables.net/blog/2014-10-02

Сценарий

/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<div class="slider">'+
        '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
            '<tr>'+
                '<td>Full name:</td>'+
                '<td>'+d.name+'</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Extension number:</td>'+
                '<td>'+d.extn+'</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Extra info:</td>'+
                '<td>And any further details here (images etc)...</td>'+
            '</tr>'+
        '</table>'+
    '</div>';
}

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "ajax": "/examples/ajax/data/objects.txt",
        "columns": [
            {
                "class":          'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "salary" }
        ],
        "order": [[1, 'asc']]
    } );

    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            $('div.slider', row.child()).slideUp( function () {
                row.child.hide();
                tr.removeClass('shown');
            } );
        }
        else {
            // Open this row
            row.child( format(row.data()), 'no-padding' ).show();
            tr.addClass('shown');

            $('div.slider', row.child()).slideDown();
        }
    } );
} );

Расширенное представление дизайна

<div class="slider">
    ... Data to be shown ...
</div>
<style>
div.slider {
    display: none;
}
td.details-control {
    background: url('/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}

tr.shown td.details-control {
    background: url('/examples/resources/details_close.png') no-repeat center center;
}

div.slider {
    display: none;
}

table.dataTable tbody td.no-padding {
    padding: 0;
}
</style>

Answer 3

Я не совсем уверен, как работают угловые, но вот правильный способ, которым вы должны реализовать складную row; просто добавьте новые row и <td colspan="100">, чтобы эта ячейка расширилась до полной ширины таблицы, и вставьте туда свой контент:

<tr>
  <td colspan="100">
    <div class="box">
      your markup here
    </div>
  </td>
</tr>

Answer 4

Вам нужно только удалить 'ng-container'. Это решит вашу проблему.

Заменить этот код

   <ng-container *ngIf="show">
    <div class="box" [class.opened]="show">
      <tr>
        <td><div>Sam</div></td>
        <td><div>Sample</div></td>
        <td><div>35</div></td>
      </tr>
      <tr></tr>
      <tr>
        <td><div>Piet</div></td>
        <td><div>Miller</div></td>
        <td><div>42</div></td>
      </tr>
    </div>
  </ng-container>

С этим

    <div class="box" [class.opened]="show">
      <tr>
        <td><div>Sam</div></td>
        <td><div>Sample</div></td>
        <td><div>35</div></td>
      </tr>
      <tr></tr>
      <tr>
        <td><div>Piet</div></td>
        <td><div>Miller</div></td>
        <td><div>42</div></td>
      </tr>
    </div>

Если вы хотите, чтобы 'ng-container' был в вашем коде, поместите его в div (который имеет поле класса). Но это замедляет вашу анимацию.

Answer 5

<table style="width:100%">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
    </tr>
    <tr (click)="show = !show">
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <ng-container *ngIf="show">
        <tr class="box" [class.opened]="show">
            <td><div>Sam</div></td>
            <td><div>Sample</div></td>
            <td><div>35</div></td>
        </tr>
        <tr>
            <td><div>Piet</div></td>
            <td><div>Miller</div></td>
            <td><div>42</div></td>
        </tr>
    </ng-container>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
</table>


<div style="margin-top: 20px" class="box" [class.opened]="show">
    Here the animation is working proper.  <br> <br>
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque ornare aenean euismod elementum nisi quis eleifend. Vivamus at augue eget arcu dictum. Dui sapien eget mi proin sed libero enim sed faucibus. Justo laoreet sit amet cursus sit amet dictum sit. Varius sit amet mattis vulputate. Lorem ipsum dolor sit amet consectetur adipiscing elit. Convallis tellus id interdum velit laoreet id donec ultrices. Tempus urna et pharetra pharetra massa massa. Tempor commodo ullamcorper a lacus vestibulum sed arcu non odio. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Semper auctor neque vitae tempus quam pellentesque nec nam. Mauris nunc congue nisi vitae suscipit tellus mauris. Eget magna fermentum iaculis eu. Mi in nulla posuere sollicitudin. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque. Nam libero justo laoreet sit amet. Aliquam faucibus purus in massa. Velit ut tortor pretium viverra suspendisse potenti nullam ac.
</div>

хорошо удалили div из таблицы!