Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-22 13:45:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs(transitions): add poster for videos

Browse Source
This commit is contained in:
Sébastien Chopin 2022-10-06 18:58:15 +02:00
parent ce456f8ed9
commit 99907dbf4f
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/content/1.getting-started/5.transitions.md
View File

@ -55,7 +55,7 @@ To start adding transition between your pages, add the following CSS to your [`a
This produces the following result when navigating between pages:
<video controls class="rounded">
<video controls class="rounded" poster="https://res.cloudinary.com/nuxt/video/upload/v1665061349/nuxt3/nuxt3-page-transitions_umwvmh.jpg">
<source src="https://res.cloudinary.com/nuxt/video/upload/v1665061349/nuxt3/nuxt3-page-transitions_umwvmh.mp4" type="video/mp4">
</video>
@ -96,7 +96,7 @@ definePageMeta({
Moving to the about page will add the 3d rotation effect:
<video controls class="rounded">
<video controls class="rounded" poster="https://res.cloudinary.com/nuxt/video/upload/v1665063233/nuxt3/nuxt3-page-transitions-cutom.jpg">
<source src="https://res.cloudinary.com/nuxt/video/upload/v1665063233/nuxt3/nuxt3-page-transitions-cutom.mp4" type="video/mp4">
</video>
@ -187,7 +187,7 @@ definePageMeta({
This produces the following result when navigating between pages:
<video controls class="rounded">
<video controls class="rounded" poster="https://res.cloudinary.com/nuxt/video/upload/v1665065289/nuxt3/nuxt3-layouts-transitions_c9hwlx.jpg">
<source src="https://res.cloudinary.com/nuxt/video/upload/v1665065289/nuxt3/nuxt3-layouts-transitions_c9hwlx.mp4" type="video/mp4">
</video>
@ -360,7 +360,7 @@ const next = computed(() => '/' + (id.value + 1))
The page now applies the `slide-left` transition when going to the next id and `slide-right` for the previous:
<video controls class="rounded">
<video controls class="rounded" poster="https://res.cloudinary.com/nuxt/video/upload/v1665069410/nuxt3/nuxt-dynamic-page-transitions.jpg">
<source src="https://res.cloudinary.com/nuxt/video/upload/v1665069410/nuxt3/nuxt-dynamic-page-transitions.mp4" type="video/mp4">
</video>