feat: element transitions

docs/guide/animations.md

@@ -91,6 +91,53 @@ clicks: 3
 </v-clicks>
 ```
 
-## Transitions
+## Element Transitions
 
-The built-in support for slides and elements transitions is NOT YET provided in the current version. We are planning to add support for them in the next major version. Before that, you can still use your custom styles and libraries to do that.
+When you apply the `v-click` directive to your elements, it will attach the class name `slidev-vclick-target` to it. When the elements are hidden, the class name `slidev-vclick-hidden` will also be attached. For example:
+
+```html
+<div class="slidev-vclick-target slidev-vclick-hidden">Text</div>
+```
+
+After a click, it will become
+
+```html
+<div class="slidev-vclick-target">Text</div>
+```
+
+By default, a subtle opacity transition is applied to those classes:
+
+```css
+// the default
+
+.slidev-vclick-target {
+  transition: opacity 100ms ease;
+}
+
+.slidev-vclick-hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+```
+
+You can override them to customize the transition effects in your custom stylesheets. 
+
+For example, you can achieve the scale up transitions by: 
+
+```css
+// styles.css
+
+.slidev-vclick-target {
+  transition: all 500ms ease;
+}
+
+.slidev-vclick-hidden {
+  transform: scale(0);
+}
+```
+
+Learn more about [customizing styles](/custom/directory-structure#style).
+
+## Pages Transitions
+
+The built-in support for slides is NOT YET provided in the current version. We are planning to add support for them in the next major version. Before that, you can still use your custom styles and libraries to do that.

docs/guide/syntax.md

@@ -72,6 +72,8 @@ console.log('Hello, World!')
 //```
 ~~~
 
+### Line Highlighting
+
 To highlight specific lines, simply add line numbers within bracket `{}`. Line numbers start counting from 1.
 
 ~~~ts
@@ -100,6 +102,8 @@ function add(
 
 This will first highlight `a: Ref<number> | number` and `b: Ref<number> | number`, and then `return computed(() => unref(a) + unref(b))` after one click, and lastly, the whole block. Learn more in the [clicks animations guide](/guide/animations).
 
+### Monaco Editor
+
 Whenever you want to do some modification in the presentation, simply add `{monaco}` after the language id — it turns the block into a fully-featured Monaco editor!
 
 ~~~ts
@@ -108,6 +112,8 @@ console.log('HelloWorld')
 //```
 ~~~
 
+Learn more about [configuring Monaco](/custom/config-monaco).
+
 ## Notes
 
 You can also take notes for each slide. They will show up in [Presenter Mode](/guide/presenter-mode) for you to reference during presentations.

packages/client/builtin/CodeHighlightController.vue

@@ -2,7 +2,7 @@
 import { range, remove } from '@antfu/utils'
 import { parseRangeString } from '@slidev/parser/core'
 import { computed, defineProps, getCurrentInstance, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue'
-import { injectionClicks, injectionClicksElements, injectionClicksDisabled } from '../modules/directives'
+import { injectionClicks, injectionClicksElements, injectionClicksDisabled, CLASS_VCLICK_TARGET } from '../modules/directives'
 
 const props = defineProps({
   ranges: {
@@ -18,10 +18,8 @@ function makeid(length = 5) {
   const result = []
   const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
   const charactersLength = characters.length
-  for (let i = 0; i < length; i++) {
-    result.push(characters.charAt(Math.floor(Math.random()
- * charactersLength)))
-  }
+  for (let i = 0; i < length; i++)
+    result.push(characters.charAt(Math.floor(Math.random() * charactersLength)))
   return result.join('')
 }
 
@@ -40,21 +38,20 @@ onMounted(() => {
     const id = makeid()
     const ids = range(props.ranges.length - 1).map(i => id + i)
     elements.value.push(...ids)
-    onUnmounted(() => {
-      ids.forEach(i => remove(elements.value, i))
-    }, vm)
+    onUnmounted(() => ids.forEach(i => remove(elements.value, i)), vm)
   }
 
   watchEffect(() => {
     if (!el.value)
       return
-    const duoTone = el.value.querySelector('.shiki-dark')
-    const targets = duoTone ? Array.from(el.value.querySelectorAll('.shiki')) : [el.value]
+    const isDuoTone = el.value.querySelector('.shiki-dark')
+    const targets = isDuoTone ? Array.from(el.value.querySelectorAll('.shiki')) : [el.value]
     for (const target of targets) {
       const lines = Array.from(target.querySelectorAll('.line'))
       const highlights: number[] = parseRangeString(lines.length, rangeStr.value)
       lines.forEach((line, idx) => {
         const highlighted = highlights.includes(idx)
+        line.classList.toggle(CLASS_VCLICK_TARGET, true)
         line.classList.toggle('highlighted', highlighted)
         line.classList.toggle('dishonored', !highlighted)
       })

packages/client/modules/directives.ts

@@ -6,6 +6,11 @@ export const injectionClicks: InjectionKey<Ref<number>> = Symbol('v-click-clicks
 export const injectionClicksElements: InjectionKey<Ref<(Element | string)[]>> = Symbol('v-click-clicks-elements')
 export const injectionClicksDisabled: InjectionKey<Ref<boolean>> = Symbol('v-click-clicks-disabled')
 
+export const CLASS_VCLICK_TARGET = 'slidev-vclick-target'
+export const CLASS_VCLICK_HIDDEN = 'slidev-vclick-hidden'
+export const CLASS_VCLICK_GONE = 'slidev-vclick-gone'
+export const CLASS_VCLICK_HIDDEN_EXP = 'slidev-vclick-hidden-explicitly'
+
 function dirInject<T = unknown>(dir: DirectiveBinding<any>, key: InjectionKey<T> | string, defaultValue?: T): T | undefined {
   return (dir.instance?.$ as any).provides[key as any] ?? defaultValue
 }
@@ -29,19 +34,22 @@ export default function createDirectives() {
           if (!elements.value.includes(el))
             elements.value.push(el)
 
+          el?.classList.toggle(CLASS_VCLICK_TARGET, true)
+
           watch(
             clicks,
             () => {
               const show = dir.value != null
                 ? clicks.value >= dir.value
                 : clicks.value > prev
-              if (!el.classList.contains('v-click-hidden-explicitly'))
-                el.classList.toggle('v-click-hidden', !show)
+              if (!el.classList.contains(CLASS_VCLICK_HIDDEN_EXP))
+                el.classList.toggle(CLASS_VCLICK_HIDDEN, !show)
             },
             { immediate: true },
           )
         },
-        unmounted(el, dir) {
+        unmounted(el: HTMLElement, dir) {
+          el?.classList.toggle(CLASS_VCLICK_TARGET, false)
           const elements = dirInject(dir, injectionClicksElements)!
           if (elements?.value)
             remove(elements.value, el)
@@ -61,16 +69,21 @@ export default function createDirectives() {
 
           const prev = elements.value.length
 
+          el?.classList.toggle(CLASS_VCLICK_TARGET, true)
+
           watch(
             clicks,
             () => {
               const show = clicks.value >= (dir.value ?? prev)
-              if (!el.classList.contains('v-click-hidden-explicitly'))
-                el.classList.toggle('v-click-hidden', !show)
+              if (!el.classList.contains(CLASS_VCLICK_HIDDEN_EXP))
+                el.classList.toggle(CLASS_VCLICK_HIDDEN, !show)
             },
             { immediate: true },
           )
         },
+        unmounted(el: HTMLElement) {
+          el?.classList.toggle(CLASS_VCLICK_TARGET, true)
+        },
       })
 
       app.directive('click-hide', {
@@ -83,17 +96,20 @@ export default function createDirectives() {
 
           const clicks = dirInject(dir, injectionClicks)!
 
+          el?.classList.toggle(CLASS_VCLICK_TARGET, true)
+
           watch(
             clicks,
             () => {
               const hide = clicks.value > dir.value
-              el.classList.toggle('v-click-hidden', hide)
-              el.classList.toggle('v-click-hidden-explicitly', hide)
+              el.classList.toggle(CLASS_VCLICK_HIDDEN, hide)
+              el.classList.toggle(CLASS_VCLICK_HIDDEN_EXP, hide)
             },
             { immediate: true },
           )
         },
         unmounted(el, dir) {
+          el?.classList.toggle(CLASS_VCLICK_TARGET, false)
           const elements = dirInject(dir, injectionClicksElements)!
           if (elements?.value)
             remove(elements.value, el)

packages/client/styles/index.css

@@ -24,6 +24,10 @@ html {
   @apply opacity-25 pointer-events-none;
 }
 
-.v-click-hidden {
+.slidev-vclick-target {
+  @apply transition-opacity duration-100;
+}
+
+.slidev-vclick-hidden {
   @apply !opacity-0 !pointer-events-none;
 }