当前位置: 代码迷 >> 综合 >> 组件加载过渡动画效果 BlazorAnimate
  详细解决方案

组件加载过渡动画效果 BlazorAnimate

热度:89   发布时间:2024-02-25 15:16:46.0

1.引用依赖包:BlazorAnimate

2.在 index.html 文件中</body>节前引用脚本

    <script src="_content/BlazorAnimate/blazorAnimateInterop.js"></script>

3.加载组件动画放大过渡效果例子

@page "/animation"
@using BlazorAnimate<h3>Animation in Blazor</h3>
<hr />
<div class="row"><div class="col-3"><div class="form-group"><button class="btn btn-primary" @onclick="MyAnimationRunclick" >Run Animation</button></div></div><hr /></div>
<Animate Animation="Animations.ZoomIn" Duration="TimeSpan.FromSeconds(0.5)" IsManual="false" @ref="MyAnimation_1"><Editforms></Editforms>
</Animate>@code {private Animate MyAnimation_1;private void MyAnimationRunclick(){MyAnimation_1.Run();}}