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;
                }
            }
            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();
        }