Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

Commit

Permalink
docs(transitions): add poster for videos
Browse files Browse the repository at this point in the history
  • Loading branch information
Atinux committed Oct 6, 2022
1 parent ce456f8 commit 99907db
Showing 1 changed file with 4 additions and 4 deletions.
8 changes: 4 additions & 4 deletions docs/content/1.getting-started/5.transitions.md
Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down

0 comments on commit 99907db

Please sign in to comment.