> For the complete documentation index, see [llms.txt](https://sugar-at.gitbook.io/blog-article/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sugar-at.gitbook.io/blog-article/animation/demo.md).

# 2.transition 实例

## demo1→[在线预览源代码](https://codepen.io/sugarInSoup/pen/GRgmaxN)

* 效果

  ![](https://img2018.cnblogs.com/blog/1504886/201912/1504886-20191224122735483-797926642.gif)

## demo2→[在线预览源代码](https://codepen.io/sugarInSoup/pen/WNbjBKM)

* 效果

  ![](https://img2018.cnblogs.com/blog/1504886/201912/1504886-20191224123316823-72298809.gif)

## demo3→[在线预览源代码](https://codepen.io/sugarInSoup/pen/GRgmboO)

* 效果

  ![](https://img2018.cnblogs.com/blog/1504886/201912/1504886-20191224123504504-95077630.gif)