feat: element transitions

Author: antfu

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.

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.