feat: add slide page selector for custom styling

docs/guide/animations.md

@@ -122,7 +122,7 @@ By default, a subtle opacity transition is applied to those classes:
 
 You can override them to customize the transition effects in your custom stylesheets. 
 
-For example, you can achieve the scale up transitions by: 
+For example, you can achieve the scaling up transitions by: 
 
 ```css
 // styles.css
@@ -136,6 +136,21 @@ For example, you can achieve the scale up transitions by:
 }
 ```
 
+To specify animations for only certain slide or layout
+
+```scss
+.slidev-page-7,
+.slidev-layout.my-custom-layout {
+  .slidev-vclick-target {
+    transition: all 500ms ease;
+  }
+
+  .slidev-vclick-hidden {
+    transform: scale(0);
+  }
+}
+```
+
 Learn more about [customizing styles](/custom/directory-structure#style).
 
 ## Pages Transitions

packages/client/internals/SlideContainer.vue

@@ -28,6 +28,9 @@ const props = defineProps({
   scale: {
     type: Number,
   },
+  no: {
+    type: Number,
+  },
   is: {
     type: Object,
   },
@@ -73,13 +76,20 @@ const style = computed(() => ({
   width: `${slideWidth}px`,
   transform: `translate(-50%, -50%) scale(${scale.value})`,
 }))
+
+const classes = computed(() => {
+  const no = props.no ?? props.route?.meta?.slide?.no
+  if (no != null)
+    return `slidev-page-${no}`
+  return ''
+})
 </script>
 
 <template>
   <div id="slide-container" ref="root">
     <div id="slide-content" :style="style">
       <slot>
-        <component :is="props.is || route.component" />
+        <component :is="props.is || route.component" :classes="classes" />
       </slot>
     </div>
     <slot name="controls" />

packages/client/routes.ts

@@ -47,6 +47,7 @@ declare module 'vue-router' {
       start: number
       end: number
       id: number
+      no: number
       file: string
     }
   }