protected override async Task OnAfterRenderAsync(bool firstRender) { await base.OnAfterRenderAsync(firstRender); if (firstRender) { thisRef = DotNetObjectReference.Create(this); clsBuilder = HtmlPropertyBuilder.CreateCssClassBuilder() .Add("blazor-animation") .Add(Cls?.Split(' ') ?? new string[0]); await JSRuntime.InvokeVoidAsync("RegisterAnimationBegin", thisRef, animationElement); styleBuilder = HtmlPropertyBuilder.CreateCssStyleBuilder() .Add(InitialStyle?.Split(';') ?? new string[0]) .AddIf(IsAbsolute, "position:absolute") .Add("transition:all 1s ease"); if (paths.Any()) { var firstStyle = paths.Peek(); styleBuilder.Remove("transition").Add($"transition:all {(firstStyle.Duration <= 0 ? 1000 : firstStyle.Duration)}ms ease"); } MarkAsRequireRender(); StateHasChanged(); return; } if (!animationBegined) { animationBegined = true; await AnimationElementLoadAsync(); } }
private void ExecuteAnimation(string style, bool increment) { animating = true; var styles = style.Split(';'); currentStyleNames = styles.Select(x => x.Split(':')[0]).ToList(); for (int i = 0; i < currentStyleNames.Count; i++) { var styleName = currentStyleNames[i]; if (styleName == "margin") { currentStyleNames[i] = "margin-left"; currentStyleNames.AddRange(new string[] { "margin-right", "margin-bottom", "margin-top" }); continue; } if (styleName == "padding") { currentStyleNames[i] = "padding-left"; currentStyleNames.AddRange(new string[] { "padding-right", "padding-bottom", "padding-top" }); continue; } } Console.WriteLine(string.Join(",", currentStyleNames)); foreach (var styleItem in styles) { var styleName = styleItem.Split(':')[0]; var finalStyle = styleItem; if (increment && styleItem.EndsWith("px", StringComparison.CurrentCultureIgnoreCase)) { var incrementValue = Convert.ToDouble(Regex.Match(styleItem, @"\d+\.*").Value); var oldStyle = styleBuilder.FirstOrDefault(x => x.StartsWith($"{styleName}:")); if (oldStyle == null) { styleBuilder.Remove(styleName).Add(finalStyle); continue; } var oldValue = Convert.ToDouble(Regex.Match(oldStyle, @"\d+\.*").Value); finalStyle = $"{styleName}:{(oldValue + incrementValue).ToString()}px"; styleBuilder.Remove(styleName).Add(finalStyle); continue; } styleBuilder.Remove(styleName).Add(finalStyle); } MarkAsRequireRender(); StateHasChanged(); }