表中子行的滑动动画

你可能需要使用css属性,动画,而不是过渡。

我已经编辑了你的闪电战

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

您只需删除“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里面(它有class框)。但它会减慢动画的速度。

<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拿走了!

row ; 只需添加一个新的 和一个 <td colspan="100"> 以便此单元格扩展到整个表格宽度,并在其中插入内容:

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

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>