角度动画:先淡出,然后淡入

时间:2021-02-16 19:52:39

标签: angular typescript angular-animations

我有以下 HTML

u

我想为 :leave:enter 过渡设置动画。我会说非常微不足道

我可以用下面的动画来做到这一点

<div @fadeInOut *ngIf="state">State is true</div>
<div @fadeInOut *ngIf="!state">State is false</div>

<button (click)="state = !state">Toggle</button>

但问题是,一旦过渡开始,两个元素都是可见的。我想要的是首先 :leave 消失,然后 :enter 出现。实现这一目标的正确方法是什么?

1 个答案:

答案 0 :(得分:0)

您可以通过为 function cptui_register_my_cpts_addresses() { /** * Post Type: Addresses. */ $labels = [ "name" => __( __("Addresses",'cnm_theme'), "custom-post-type-ui" ), "singular_name" => __( __("Addresses",'cnm_theme'), "custom-post-type-ui" ), ]; $args = [ "label" => __( __("Addresses",'cnm_theme'), "custom-post-type-ui" ), "labels" => $labels, "description" => "", "public" => true, "publicly_queryable" => true, "show_ui" => true, "show_in_rest" => true, "rest_base" => "", "rest_controller_class" => "WP_REST_Posts_Controller", "has_archive" => false, "show_in_menu" => true, "show_in_nav_menus" => true, "delete_with_user" => false, "exclude_from_search" => false, "capability_type" => "post", "map_meta_cap" => true, "hierarchical" => true, "rewrite" => [ "slug" => '%category%','with_front' => false ], // "rewrite" => false, "query_var" => true, "supports" => [ "title", "editor", "thumbnail", "excerpt", "trackbacks", "custom-fields", "comments", "revisions", "author", "page-attributes", "post-formats" ], "taxonomies" => [ "category", "post_tag" ], ]; register_post_type( "addresses", $args ); } add_action( 'init', 'cptui_register_my_cpts_addresses' ); 动画添加等于 :enter 动画长度的延迟

:leave

参考:https://angular.io/api/animations/animate

相关问题