Question

在展开面板上单击时如何禁用动画？我尝试过：

<div class="list-item">
    <div class="item-img">

        <?php

        $term_slug    = 't-shirts';
        $taxonomy     = "product_cat";
        $term_id      = get_term_by( 'slug', $term_slug, $taxonomy )->term_id;
        $thumbnail_id = get_woocommerce_term_meta( $term_id, 'thumbnail_id', true );
        $image        = wp_get_attachment_url( $thumbnail_id );

        echo '<img src="'.$image.'" alt="" width="50" height="50" />';

        ?>

</div>

<a href="#">
    <div class="item-name">
        <?php if( $term = get_term_by('slug', 't-shirts', 'product_cat') ) echo $term->name;?>
    </div>
</a>

</div>

<div class="list-item">
    <div class="item-img">

        <?php

        $term_slug    = 'jeans';
        $taxonomy     = "product_cat";
        $term_id      = get_term_by( 'slug', $term_slug, $taxonomy )->term_id;
        $thumbnail_id = get_woocommerce_term_meta( $term_id, 'thumbnail_id', true );
        $image        = wp_get_attachment_url( $thumbnail_id );

        echo '<img src="'.$image.'" alt="" width="50" height="50" />';

        ?>

</div>

<a href="#">
    <div class="item-name">
    <?php if( $term = get_term_by('slug', 'jeans', 'product_cat') ) echo $term->name;?>
    </div>
</a>

</div>

还有这个：

::ng-deep .mat-expansion-panel-header {
    transition: none !important; 
}

但是没有人为我工作，动画仍然在这里。

::ng-deep .mat-expansion-panel-body {
    transition: none !important; 
}

Answer 1

您可以添加

[@.disabled]="true"

绑定到您的元素以禁用给定面板的动画。

在此处了解更多信息： https://angular.io/api/animations/trigger#disabling-animations

Answer 2

这对我有用

Answer 3

可以使用disabled属性禁用扩展面板。禁用的扩展面板不能由用户切换，但仍可以通过编程方式进行操作。

<mat-expansion-panel [disabled]="true">
  <mat-expansion-panel-header>
    Settings
  </mat-expansion-panel-header>
    Some content
<mat-expansion-panel>

只需在[disabled]="condition"标签中添加<mat-expansion-panel>

信息取自官方文档：https://material.angular.io/components/expansion/overview

如何禁用Angular Material Expansion Panel动画？

3 个答案: