c# - 如何在 Blazor 中设置状态转换动画？

Question

在我的 Blazor 组件中，我经常根据条件语句渲染组件，例如

@if (_contact.IsCustomer)
{
    <SalesOrdersList Customer="@_contact" />
}

或者从循环中，例如

@foreach(var salesOrder in _customer.SalesOrders)
{
    <SalesOrderSummary SalesOrder="@salesOrder" />
}

当我更改状态时，我希望为状态转换设置动画，以便组件淡入/淡出。在上面的示例中，当 IsCustomer 更改时，或者在 SalesOrders 集合中添加或删除记录时，可能会发生这种情况。

添加组件的动画

我可以看到在添加组件时如何实现这一点，通过具有 CSS 类的组件，该类在组件渲染时会发生动画淡入淡出 - 例如如Chris Sainty's excellent toast example所示

动画移除组件

我无法想象在删除组件时你会如何做到这一点，因为当 DOM 的该部分重新渲染时，该组件就会停止存在？

React 有 react-transition-group涉及过渡期，但我目前在 Blazor 中找不到类似的内容？

有没有办法在 Blazor 中添加移除组件的动画？

动画页面转换

另一个经常使用动画的状态转换是改变“页面”。同样，我目前无法在 Blazor 中找到执行此操作的方法？实际上，这可以只是一个用于删除旧页面组件的动画和另一个用于添加新页面组件的动画，但在某些框架中，这是在路由级别而不是组件级别完成的 - 目前我在 Blazor 中找不到任何级别的任何内容？

Answer 1

Blazor 不涵盖这种情况，为此，您需要使用 CSS。很难给你一个具体的例子，因为它取决于你希望动画如何工作以及采用什么样的风格，但我建议检查 CSS 过渡和关键帧。

这里有一些很好的资源

• https://www.w3schools.com/css/css3_transitions.asp
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
• https://css-tricks.com/almanac/properties/t/transition/

正如您在问题中提到的，处理被删除的项目是我目前还无法弄清楚的事情。所以不幸的是我无能为力。