docs: add missing percentage examples and overall improvement

xsjcTony · Jul 9, 2024 · a3c793f · a3c793f
1 parent 804393b
commit a3c793f
Show file tree

Hide file tree

Showing 10 changed files with 537 additions and 81 deletions.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -58,6 +58,7 @@ export default defineConfig({
       { text: 'Home', link: '/' },
       { text: 'Guide', link: '/guide/', activeMatch: '^/guide/' },
       { text: 'Animations', link: '/animations/', activeMatch: '^/animations/' },
+      { text: 'Playground', link: 'https://unocss.dev/play/?html=DwEwlgbgBAxgNgQwM5ILwCIAWBaJMBOApoQHZQDm%2BYIUADojIdmAC6EC2S2jJb%2B6APgBQUKKEixEKDAhJh2CNszJI41JmBLYW2AGYBXOHCi6EIDVoAMUWfMVMQ%2B-IrAB7LQEZL3m3IVLzRABPbABWHzYADx0ADki4QRFRKAAZV1cAaxsWKHZCJOAAenAIYSKS4SA&config=JYWwDg9gTgLgBAbwFBzgEwKYDNgDsMDCEuOA5gDQpxhQYDOGMAgjDFMAEYCuMwWAnpVQ16jAJIBjYnSHVaDGAFVcESgF84WKBBBwA5FxUS6dPUlCRYiOaOa5QAQ17S4GrTv2GIxugFoRCr4O9iBOwNJmSEgYAB6W8JhYDlwANgnYeITEZAAUyMLyjHQAXHAA2lQFtsoQOQCUslUKTCFh0nmawCkpALIQmKV6HBAwABZ6rg1UALrqdUhAA&css=PQKgBA6gTglgLgUzAYwK4Gc4HsC2YDCAyoWABYJQIA0YAhgHYAmYcUD6AZllDhWOqgAOg7nAB0YAGLcwCAB60cggDYIAXGBDAAUKDBi0mXGADe2sGC704AWgDuCGAHNScDQFYADJ4Dc5sAACtMLKAJ5gggCMLPK2ABR2pPBIcsoAlH4WAEa0yADWTlBYqEw2yFjK3Bpw5LxxAOTllVDoYpSMYgAs3vUZ2gC%2BmsBAA&options=N4IgLgTghgdgzgMwPYQLYAkyoDYgFwJTZwCmAvkA' },
       {
         text: `v${version}`,
         items: [
@@ -86,6 +87,7 @@ export default defineConfig({
           { text: 'Animation Properties', link: '/animations/animation-properties' },
         ],
       },
+      { text: 'Interactive Documentation', link: '/interactive-documentation' },
     ],
 
     socialLinks: [

diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue
@@ -12,33 +12,17 @@ function enableTransitions(): boolean {
     && window.matchMedia('(prefers-reduced-motion: no-preference)').matches
 }
 
-provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
+provide('toggle-appearance', async () => {
   if (!enableTransitions()) {
     isDark.value = !isDark.value
     return
   }
 
-  const clipPath = [
-    `circle(0px at ${x}px ${y}px)`,
-    `circle(${Math.hypot(
-      Math.max(x, innerWidth - x),
-      Math.max(y, innerHeight - y),
-    )}px at ${x}px ${y}px)`,
-  ]
-
   await document.startViewTransition(async () => {
     isDark.value = !isDark.value
     await nextTick()
-  }).ready
-
-  document.documentElement.animate(
-    { clipPath: isDark.value ? clipPath.reverse() : clipPath },
-    {
-      duration: 300,
-      easing: 'ease-in',
-      pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`,
-    },
-  )
+  })
+    .ready
 })
 </script>
 
@@ -51,17 +35,6 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
 <style>
 ::view-transition-old(root),
 ::view-transition-new(root) {
-  animation: none;
-  mix-blend-mode: normal;
-}
-
-::view-transition-old(root),
-.dark::view-transition-new(root) {
-  z-index: 1;
-}
-
-::view-transition-new(root),
-.dark::view-transition-old(root) {
-  z-index: 9999;
+  animation-duration: .3s;
 }
 </style>
diff --git a/docs/src/animations/fade.md b/docs/src/animations/fade.md
@@ -9,6 +9,7 @@ Use classname `fade-(in|out)-<value>` to define animation's `opacity`.
 You can use either of below as the `<value>`:
 
 - Any number between `0` and `100` including decimals. E.g. `fade-in-50`
+- Any percentage between `0%` and `100%` including decimals, E.g. `fade-in-66.6%`
 - CSS variable. E.g. `fade-in-$my-css-var`
 
 ## Fade In
@@ -20,7 +21,8 @@ Define enter animation's starting `opacity`.
 ```html
 <button class="animate-in fade-in">Button A</button>
 <button class="animate-in fade-in-50">Button B</button>
-<button class="animate-in fade-in-$my-css-var">Button C</button>
+<button class="animate-in fade-in-66.6%">Button C</button>
+<button class="animate-in fade-in-$my-css-var">Button D</button>
 ```
 
 <table>
@@ -33,18 +35,30 @@ Define enter animation's starting `opacity`.
   <tbody>
     <tr>
       <td><code>fade-in</code></td>
-      <td rowspan="2"><code>--una-enter-opacity: 0;</code></td>
+      <td rowspan="3"><code>--una-enter-opacity: 0;</code></td>
     </tr>
     <tr>
       <td><code>fade-in-0</code></td>
     </tr>
+    <tr>
+      <td><code>fade-in-0%</code></td>
+    </tr>
     <tr>
       <td><code>fade-in-10</code></td>
-      <td><code>--una-enter-opacity: 0.1;</code></td>
+      <td rowspan="2"><code>--una-enter-opacity: 0.1;</code></td>
+    </tr>
+    <tr>
+      <td><code>fade-in-10%</code></td>
     </tr>
     <tr>
       <td><code>fade-in-.8</code></td>
-      <td><code>--una-enter-opacity: 0.008;</code></td>
+      <td rowspan="3"><code>--una-enter-opacity: 0.008;</code></td>
+    </tr>
+    <tr>
+      <td><code>fade-in-0.8</code></td>
+    </tr>
+    <tr>
+      <td><code>fade-in-.8%</code></td>
     </tr>
     <tr>
       <td><code>fade-in-52.1</code></td>
@@ -74,7 +88,8 @@ Define exit animation's ending `opacity`.
 ```html
 <button class="animate-out fade-out">Button A</button>
 <button class="animate-out fade-out-50">Button B</button>
-<button class="animate-out fade-out-$my-css-var">Button C</button>
+<button class="animate-out fade-out-66.6%">Button C</button>
+<button class="animate-out fade-out-$my-css-var">Button D</button>
 ```
 
 <table>
@@ -87,18 +102,30 @@ Define exit animation's ending `opacity`.
   <tbody>
     <tr>
       <td><code>fade-out</code></td>
-      <td rowspan="2"><code>--una-exit-opacity: 0;</code></td>
+      <td rowspan="3"><code>--una-exit-opacity: 0;</code></td>
     </tr>
     <tr>
       <td><code>fade-out-0</code></td>
     </tr>
+    <tr>
+      <td><code>fade-out-0%</code></td>
+    </tr>
     <tr>
       <td><code>fade-out-10</code></td>
-      <td><code>--una-exit-opacity: 0.1;</code></td>
+      <td rowspan="2"><code>--una-exit-opacity: 0.1;</code></td>
+    </tr>
+    <tr>
+      <td><code>fade-out-10%</code></td>
     </tr>
     <tr>
       <td><code>fade-out-.8</code></td>
-      <td><code>--una-exit-opacity: 0.008;</code></td>
+      <td rowspan="3"><code>--una-exit-opacity: 0.008;</code></td>
+    </tr>
+    <tr>
+      <td><code>fade-out-0.8</code></td>
+    </tr>
+    <tr>
+      <td><code>fade-out-.8%</code></td>
     </tr>
     <tr>
       <td><code>fade-out-52.1</code></td>

diff --git a/docs/src/animations/slide.md b/docs/src/animations/slide.md
@@ -19,12 +19,12 @@ You can use either of below as the `<direction>` (alias / full):
 
 | y-axis Direction | x-axis Direction | Result |
 |------------------|------------------|--------|
-| `t` / `top`      | `l` / `left`     | ↖      |
-| `t` / `top`      | `r` / `right`    | ↗      |
-| `b` / `bottom`   | `l` / `left`     | ↙      |
-| `b` / `bottom`   | `r` / `right`    | ↘      |
+| `t` / `top`      | `l` / `left`     | ↖️     |
+| `t` / `top`      | `r` / `right`    | ↗️     |
+| `b` / `bottom`   | `l` / `left`     | ↙️     |
+| `b` / `bottom`   | `r` / `right`    | ↘️     |
 
-E.g. the following combination will make the element slide in from `top-left` corner.
+E.g. the following combination will make the element slide in from `top-left` corner. [Playground](https://unocss.dev/play/?html=DwEwlgbgBAxgNgQwM5ILwCIAWBaJMBOApoQHZQDm%2BYIUADojIdmAC6EC2S2jJb%2B6APgBQUKMABGAVxYsA9mXjI06BCTDsEbZmSRxqTMCWwtsARgD0AJii7927HGwAWKADMEIA0YAMUVes0mT0QATzNvCL81DS0QSXxNMHlwyPFZfE98OmxrfFlJEk8QB3JBEVEoACFpOTIAQXLgcykZeWEm8AhhIA&config=JYWwDg9gTgLgBAbwFBzgEwKYDNgDsMDCEuOA5gDQpxhQYDOGMAgjDFMAEYCuMwWAnpVQ16jAJIBjYnSHVaDGAFVcESgF84WKBBBwA5FxUS6dPUlCRYiOaOa5QAQ17S4GrTv2GIxugFoRCr4O9iBOwNJmSEgYAB6W8JhYDlwANgnYeITEZAAUyMLyjHQAXHAA2lQFtsoQOQCUslUKTCFh0nmawCkpALIQmKV6HBAwABZ6rg1UALrqdUhAA&css=PQKgBA6gTglgLgUzAYwK4Gc4HsC2YDCAyoWABYJQIA0YAhgHYAmYcUD6AZllDhWOqgAOg7nAB0YAGLcwCAB60cggDYIAXGBDAAUKDBi0mXGADe2sGC704AWgDuCGAHNScDQFYADJ4Dc5sAACtMLKAJ5gggCMLPK2ABR2pPBIcsoAlH4WAEa0yADWTlBYqEw2yFjK3Bpw5LxxAOTllVDoYpSMYgAs3vUZ2gC%2BmsBAA&options=N4IgLgTghgdgzgMwPYQLYAkyoDYgFwJTZwCmAvkA)
 
 ```html
 <button class="animate-in slide-in-t-1/2 slide-in-l-4">Button A</button>
@@ -35,13 +35,14 @@ E.g. the following combination will make the element slide in from `top-left` co
 
 You can use either of below as the `<value>`:
 
-- Any number including negative decimals. E.g. `slide-in-t-50`
-- Any fraction including negative. E.g. `slide-in-t-1/2`
+- Any number including negative(⚠️) and decimals. E.g. `slide-in-t-50`
+- Any percentage including negative(⚠️) and decimals. E.g. `slide-in-t-66.6%`
+- Any fraction including negative(⚠️). E.g. `slide-in-t-1/2`
 - `full` as `100%`. E.g. `slide-in-t-full`
 - CSS variable. E.g. `slide-in-t-$my-css-var`
 
 ::: warning
-Using **negative** number or fraction is discouraged. Although it will work as expected, but can be misleading or hard to understand.
+Using ***NEGATIVE*** value is discouraged. Although it will work as expected, but can be misleading or hard to understand.
 
 You can always switch to the opposite direction to avoid using negative values.
 
@@ -55,7 +56,7 @@ is equivalent to
 <button class="animate-in slide-in-bottom-4">Button A</button>
 <button class="animate-in slide-in-top-8">Button B</button>
 ```
-Note: CSS variable usages will be placed as is **without** any direction or positive / negative check.
+Note: `CSS variable` usages will be placed as is **WITHOUT** any direction or positive / negative check.
 :::
 
 ## Slide In
@@ -70,9 +71,10 @@ Define enter animation's starting `translate`.
 <button class="animate-in slide-in-from-t">Button C</button>
 <button class="animate-in slide-in-from-top">Button D</button>
 <button class="animate-in slide-in-t-4">Button E</button>
-<button class="animate-in slide-in-t-2/3">Button F</button>
-<button class="animate-in slide-in-t-full">Button G</button>
-<button class="animate-in slide-in-t-$my-css-var">Button H</button>
+<button class="animate-in slide-in-t-50%">Button F</button>
+<button class="animate-in slide-in-t-2/3">Button G</button>
+<button class="animate-in slide-in-t-full">Button H</button>
+<button class="animate-in slide-in-t-$my-css-var">Button I</button>
 ```
 
 <table>
@@ -115,6 +117,10 @@ Define enter animation's starting `translate`.
       <td><code>slide-in-b-10</code></td>
       <td><code>--una-enter-translate-y: 2.5rem;</code></td>
     </tr>
+    <tr>
+      <td><code>slide-in-b-48%</code></td>
+      <td><code>--una-enter-translate-y: 48%;</code></td>
+    </tr>
     <tr>
       <td><code>slide-in-b-.8</code></td>
       <td><code>--una-enter-translate-y: 0.2rem;</code></td>
@@ -123,36 +129,48 @@ Define enter animation's starting `translate`.
       <td><code>slide-in-b-52.1</code></td>
       <td><code>--una-enter-translate-y: 13.025rem;</code></td>
     </tr>
+    <tr>
+      <td><code>slide-in-b-66.6%</code></td>
+      <td><code>--una-enter-translate-y: 66.6%;</code></td>
+    </tr>
     <tr>
       <td><code>slide-in-b-100</code></td>
       <td><code>--una-enter-translate-y: 25rem;</code></td>
     </tr>
     <tr>
-      <td><code>slide-in-b--20</code></td>
+      <td><code>slide-in-b--20</code> ⚠️</td>
       <td><code>--una-enter-translate-y: -5rem;</code></td>
     </tr>
     <tr>
-      <td><code>slide-in-b--66.66</code></td>
+      <td><code>slide-in-b--48%</code> ⚠️</td>
+      <td><code>--una-enter-translate-y: -48%;</code></td>
+    </tr>
+    <tr>
+      <td><code>slide-in-b--66.66</code> ⚠️</td>
       <td><code>--una-enter-translate-y: -16.665rem;</code></td>
     </tr>
     <tr>
-      <td><code>slide-in-t--20</code></td>
+      <td><code>slide-in-t--20</code> ⚠️</td>
       <td><code>--una-enter-translate-y: 5rem;</code></td>
     </tr>
     <tr>
-      <td><code>slide-in-t--66.66</code></td>
+      <td><code>slide-in-t--48%</code> ⚠️</td>
+      <td><code>--una-enter-translate-y: 48%;</code></td>
+    </tr>
+    <tr>
+      <td><code>slide-in-t--66.66</code> ⚠️</td>
       <td><code>--una-enter-translate-y: 16.665rem;</code></td>
     </tr>
     <tr>
       <td><code>slide-in-b-1/3</code></td>
       <td><code>--una-enter-translate-y: 33.3333333333%;</code></td>
     </tr>
     <tr>
-      <td><code>slide-in-b--2/3</code></td>
+      <td><code>slide-in-b--2/3</code> ⚠️</td>
       <td><code>--una-enter-translate-y: -66.6666666667%;</code></td>
     </tr>
     <tr>
-      <td><code>slide-in-t--2/3</code></td>
+      <td><code>slide-in-t--2/3</code> ⚠️</td>
       <td><code>--una-enter-translate-y: 66.6666666667%;</code></td>
     </tr>
     <tr>
@@ -188,9 +206,10 @@ Define exit animation's starting `translate`.
 <button class="animate-out slide-out-from-t">Button C</button>
 <button class="animate-out slide-out-from-top">Button D</button>
 <button class="animate-out slide-out-t-4">Button E</button>
-<button class="animate-out slide-out-t-2/3">Button F</button>
-<button class="animate-out slide-out-t-full">Button G</button>
-<button class="animate-out slide-out-t-$my-css-var">Button H</button>
+<button class="animate-out slide-out-t-50%">Button F</button>
+<button class="animate-out slide-out-t-2/3">Button G</button>
+<button class="animate-out slide-out-t-full">Button H</button>
+<button class="animate-out slide-out-t-$my-css-var">Button I</button>
 ```
 
 <table>
@@ -233,6 +252,10 @@ Define exit animation's starting `translate`.
       <td><code>slide-out-b-10</code></td>
       <td><code>--una-exit-translate-y: 2.5rem;</code></td>
     </tr>
+    <tr>
+      <td><code>slide-out-b-48%</code></td>
+      <td><code>--una-exit-translate-y: 48%;</code></td>
+    </tr>
     <tr>
       <td><code>slide-out-b-.8</code></td>
       <td><code>--una-exit-translate-y: 0.2rem;</code></td>
@@ -241,36 +264,48 @@ Define exit animation's starting `translate`.
       <td><code>slide-out-b-52.1</code></td>
       <td><code>--una-exit-translate-y: 13.025rem;</code></td>
     </tr>
+    <tr>
+      <td><code>slide-out-b-66.6%</code></td>
+      <td><code>--una-exit-translate-y: 66.6%;</code></td>
+    </tr>
     <tr>
       <td><code>slide-out-b-100</code></td>
       <td><code>--una-exit-translate-y: 25rem;</code></td>
     </tr>
     <tr>
-      <td><code>slide-out-b--20</code></td>
+      <td><code>slide-out-b--20</code> ⚠️</td>
       <td><code>--una-exit-translate-y: -5rem;</code></td>
     </tr>
     <tr>
-      <td><code>slide-out-b--66.66</code></td>
+      <td><code>slide-out-b--48%</code> ⚠️</td>
+      <td><code>--una-exit-translate-y: -48%;</code></td>
+    </tr>
+    <tr>
+      <td><code>slide-out-b--66.66</code> ⚠️</td>
       <td><code>--una-exit-translate-y: -16.665rem;</code></td>
     </tr>
     <tr>
-      <td><code>slide-out-t--20</code></td>
+      <td><code>slide-out-t--20</code> ⚠️</td>
       <td><code>--una-exit-translate-y: 5rem;</code></td>
     </tr>
     <tr>
-      <td><code>slide-out-t--66.66</code></td>
+      <td><code>slide-out-t--48%</code> ⚠️</td>
+      <td><code>--una-exit-translate-y: 48%;</code></td>
+    </tr>
+    <tr>
+      <td><code>slide-out-t--66.66</code> ⚠️</td>
       <td><code>--una-exit-translate-y: 16.665rem;</code></td>
     </tr>
     <tr>
       <td><code>slide-out-b-1/3</code></td>
       <td><code>--una-exit-translate-y: 33.3333333333%;</code></td>
     </tr>
     <tr>
-      <td><code>slide-out-b--2/3</code></td>
+      <td><code>slide-out-b--2/3</code> ⚠️</td>
       <td><code>--una-exit-translate-y: -66.6666666667%;</code></td>
     </tr>
     <tr>
-      <td><code>slide-out-t--2/3</code></td>
+      <td><code>slide-out-t--2/3</code> ⚠️</td>
       <td><code>--una-exit-translate-y: 66.6666666667%;</code></td>
     </tr>
     <tr>