0
0
mirror of https://github.com/sveltejs/svelte.git synced 2024-11-29 16:36:44 +01:00
svelte/documentation/tutorial/10-transitions/01-transition/text.md
Puru Vijay 993b40201c
feat(site-2): New Markdown renderer, FAQ, Blog, Tutorial, Docs, (#8603)
* New FAQ, new renderer

* Push blog stuff

* Fix blog posts

* Add tutorial to be rendered

* Update documentation/content/blog/2023-03-09-zero-config-type-safety.md

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* Update documentation/content/blog/2023-03-09-zero-config-type-safety.md

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* Revamp a lot of renderer, make it (soft) compatible with sveltekit

* Remove markdown types

* Clean up faq +page

* Document stuff

* Make the options more explicity

* chore(site-2): Restructure docs pt 2 (#8604)

* Push

* Update readme

* Push

* inor accessibility fix

* minr stuff

* Add prepare

* Run prettier

* Remove test script

* pnpm update

* Update sites/svelte.dev/src/routes/examples/[slug]/+page.svelte

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* Update sites/svelte.dev/package.json

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
2023-05-25 18:19:38 +05:30

461 B

title
The transition directive

We can make more appealing user interfaces by gracefully transitioning elements into and out of the DOM. Svelte makes this very easy with the transition directive.

First, import the fade function from svelte/transition...

<script>
	import { fade } from 'svelte/transition';
	let visible = true;
</script>

...then add it to the <p> element:

<p transition:fade>Fades in and out</p>