feat: Enhance transition api

[q32757468]

Description

不同动画形式的效果：

写了example，也可以拉下来看各种形式的动画效果

Motivation and Context

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Enhancement (changes that improvement of current feature or performance)
• Refactoring (changes that neither fixes a bug nor adds a feature)
• Test Case (changes that add missing tests or correct existing tests)
• Code style optimization (changes that do not affect the meaning of the code)
• Docs (changes that only update documentation)
• Chore (changes that don't modify src or test files)

Self Check before Merge

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[gemini-code-assist]

Summary of Changes

Hello @q32757468, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a comprehensive enhancement to the animation system, providing developers with more granular control over how elements transition within the graph. It expands the transition API with new options for iteration, direction, and fill behavior, and integrates a declarative approach for defining animations directly on cells. Additionally, new examples have been added to demonstrate these powerful features for both nodes and edges, along with a new view:render event to improve animation synchronization.

Highlights

• Enhanced Animation API: The core animation API has been significantly extended to support advanced control over transitions, including iterations for repeating animations, direction (normal, reverse, alternate, alternate-reverse) for playback control, and fill (none, forwards) to define how styles are applied after an animation completes.
• Declarative Transitions for Cells: Cells can now define transitions declaratively via a new transition property in their Properties. When a cell with this property is added to the graph, its specified transitions will automatically start, simplifying animation setup.
• New Animation Examples: Several new examples have been added to showcase the enhanced animation capabilities: AnimateElementExample demonstrates native SVG animations, ComplexTransitionExample (renamed from TransitionExample) shows advanced node transitions, EdgeTransitionExample illustrates various edge animations, and TransitionConfExample highlights different ways to configure animations.
• View Render Event: A new view:render event is now emitted by NodeView and EdgeView after their initial rendering. This provides a precise hook for animations or other logic that depends on the view being fully rendered in the DOM.
• Default fill for transition method: The cell.transition() method now defaults the fill option to 'forwards', ensuring that the animated property retains its final value after the transition completes by default.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request significantly enhances the animation API by incorporating features from the Web Animations API, such as iterations, direction, and fill options. This enables more complex and repeatable animations, including infinite loops. The changes also introduce support for declarative animations on cells via a transition property and a new view:render event, which is useful for DOM-based animations. The new examples effectively demonstrate these powerful new features. The core animation logic has been well-refactored to accommodate these enhancements. I have a couple of suggestions to improve code maintainability in src/model/cell.ts.

[codecov-commenter]

Codecov Report

❌ Patch coverage is 88.60759% with 9 lines in your changes missing coverage. Please review.
✅ Project coverage is 81.94%. Comparing base (0f0f5f5) to head (ecd2ab5).
⚠️ Report is 2 commits behind head on master.

Files with missing lines	Patch %	Lines
src/model/animation.ts	90.74%	4 Missing and 1 partial ⚠️
src/model/cell.ts	82.60%	4 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #4848      +/-   ##
==========================================
- Coverage   81.94%   81.94%   -0.01%     
==========================================
  Files         327      327              
  Lines       37972    38019      +47     
  Branches     7632     7637       +5     
==========================================
+ Hits        31116    31153      +37     
- Misses       6832     6841       +9     
- Partials       24       25       +1     

Flag	Coverage Δ
x6	81.94% <88.60%> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
src/model/node.ts	85.31% <ø> (ø)
src/view/cell/type.ts	100.00% <ø> (ø)
src/view/edge/index.ts	59.63% <100.00%> (+0.02%)	⬆️
src/view/node/index.ts	64.76% <100.00%> (+0.03%)	⬆️
src/model/cell.ts	77.78% <82.60%> (-0.04%)	⬇️
src/model/animation.ts	90.41% <90.74%> (-2.34%)	⬇️

... and 1 file with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[GaoFuhong]

官方文档需要补充一下吗？

[q32757468]

官方文档需要补充一下吗？

@GaoFuhong 上周来不及加文档和补充示例了，准备先把API改动提上来看看，然后没问题就加加文档和示例~

[lxfu1]

this.ids 存在内存泄漏风险，需要 delete

[q32757468]

我看看处理一下

[q32757468]

看了一下，这里的ids应该是不存在风险，clean 本身会 delete 掉

不过我看这个issue提到会有相关问题，等后面我尝试复现修复一下
#4357