docs(animations): improve animation transition api docs

[dario-piotrowicz]

improve the transition api docs by removing unnecessary examplanations
and examples

also provide helpful information regarding entering and leaving
elements (as part of #44253)

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• angular.io application / infrastructure changes
• Other... Please describe:

Issue

Relates to Issue #44253

Does this PR introduce a breaking change?

• Yes
• No

Other information

I started looking into these docs because as part of #44253 I wanted to add the information about entering and leaving elements, but I thought that the docs here were quite unorganised and confusing so I tried to clean them up

before there were information all over the place and many thing were repeated and/or not explained clearly in my opinion

I hope I did well, if you could please give this a preview you can see that in the way I've changed it, it is much leaner, clear and easy to follow (at least for me 😜)

[jessicajaniuk]

@dario-piotrowicz This looks really good. Can you add a couple of examples based on the comments I left? I think they'd be really helpful. Otherwise this looks great.

[dario-piotrowicz]

@jessicajaniuk thanks a lot for the nice reviewing 😃 , I've added examples for the State Change Expressions please let me know what you think 🙂

Also what do you think, should I also add an example for the function variant? I would and could be a nice addition, but I am afraid that it would look a bit weird/unclear there in the first list 🤔

[jessicajaniuk]

@dario-piotrowicz You could add just one example at the end of all of the examples and clarify in a comment that it shows what a function variant of these would look like.

[jessicajaniuk]

LGTM 🍪

Once you add those last little changes, this looks great! Thanks for your work!

[dario-piotrowicz]

@jessicajaniuk I've added an example of the function variant at the end of the page, please have a look and let me know what you think 🙂

---

@dario-piotrowicz You could add just one example at the end of all of the examples and clarify in a comment that it shows what a function variant of these would look like.

I'm not sure I full understood this comment 😓 , are you suggesting to show the function variant for each single example I provided? I'm afraid that could be quite verbose and repetitive, wouldn't it? 😓
Besides I'd imagine that the function variant shouldn't be used if the string one is enough, so I am not completely sure if we should encourage that 🤔 (like in my added example I am showing a sort of situation in which a user could actually want to use the function variant)

[jessicajaniuk]

I think you've covered it. Thanks, @dario-piotrowicz. :)

[alxhub]

This PR was merged into the repository by commit 9249506.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}