slidev-theme-kotlin 0.0.7 → 0.0.8

package/README.md

@@ -35,6 +35,7 @@ Add the theme to your slides' frontmatter:
 ```yaml
 ---
 theme: kotlin
+transition: view-transition
 ---
 
 # Your Presentation Title

package/components/Kodee.vue

@@ -95,10 +95,13 @@ const positionStyles = computed(() => {
 const motionConfig = computed(() => {
   const baseScale = props.scale || 1
 
+  // Check if we're in a view transition (Kodee staying the same between slides)
+  const isViewTransitioning = typeof document !== 'undefined' && document.startViewTransition
+
   return {
     initial: {
-      opacity: 0,
-      scale: baseScale * 0.8,
+      opacity: isViewTransitioning ? 1 : 0,
+      scale: baseScale,
     },
     enter: {
       opacity: 1,
@@ -108,13 +111,14 @@ const motionConfig = computed(() => {
         stiffness: 100,
         damping: 15,
         mass: 1,
+        duration: isViewTransitioning ? 0 : undefined,
       },
     },
     leave: {
-      opacity: 0,
-      scale: baseScale * 0.8,
+      opacity: isViewTransitioning ? 1 : 0,
+      scale: baseScale,
       transition: {
-        duration: 300,
+        duration: isViewTransitioning ? 0 : 300,
       },
     },
   }

package/example.md

@@ -1,5 +1,6 @@
 ---
 theme: ./
+transition: view-transition
 ---
 
 # Kodee Magic Move Demo

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-kotlin",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "keywords": [
     "slidev-theme",

package/styles/layout.css

@@ -13,6 +13,12 @@
 ::view-transition-new(kodee-mascot) {
     animation-duration: 0.5s;
     animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    mix-blend-mode: normal;
+}
+
+::view-transition-group(kodee-mascot) {
+    animation-duration: 0.5s;
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .slidev-slide-content {