Skip to content

Commit

Permalink
Drop [] usage, Improvement in slide animation regarding sign and di…
Browse files Browse the repository at this point in the history 
…rection handling, Finished Docs
  • Loading branch information
@xsjcTony
xsjcTony committed Nov 21, 2023
1 parent a2f1972 commit 8686655
Show file tree
Hide file tree
Showing 16 changed files with 872 additions and 282 deletions.
31 changes: 29 additions & 2 deletions docs/.vitepress/config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import unocss from 'unocss/vite'
import { defineConfig } from 'vitepress'
import { version } from '../../package.json'
import externalLinkIcon from './plugins/externalLinkIcon'


Expand All @@ -24,7 +25,7 @@ export default defineConfig({
markdown: {
theme: {
dark: 'material-theme-palenight',
light: 'min-light',
light: 'vitesse-light',
},
config: (md) => {
md.use(externalLinkIcon)
Expand All @@ -33,11 +34,37 @@ export default defineConfig({
themeConfig: {
logo: '/logo.svg',
siteTitle: 'Animations Preset',
// TODO: algolia

editLink: {
pattern: 'https://github.com/xsjcTony/unocss-preset-animations/edit/main/docs/src/:path',
text: 'Edit this page on GitHub',
},

search: {
provider: 'algolia',
options: {
appId: '59LIXN9T8K',
apiKey: 'c029fa22a73158f7b77eab5f47a4f33a',
indexName: 'unocss-preset-animations-aelita',
},
},

footer: {
message: 'Released under the MIT License.',
copyright: 'Copyright © 2023-present Aelita (Tony Jiang)',
},

nav: [
{ text: 'Home', link: '/' },
{ text: 'Guide', link: '/guide/', activeMatch: '^/guide/' },
{ text: 'Animations', link: '/animations/', activeMatch: '^/animations/' },
{
// eslint-disable-next-line ts/restrict-template-expressions
text: `v${version}`,
items: [
{ text: 'Release Notes', link: 'https://github.com/xsjcTony/unocss-preset-animations/releases' },
],
},
],

sidebar: [
Expand Down
21 changes: 21 additions & 0 deletions docs/.vitepress/theme/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,27 @@
}


/**
* Component: Custom Block
* -------------------------------------------------------------------------- */

:root {
--vp-custom-block-tip-border: transparent;
--vp-custom-block-tip-text: var(--vp-c-text-1);
--vp-custom-block-tip-bg: var(--vp-c-green-soft);
--vp-custom-block-tip-code-bg: var(--vp-c-green-soft);
}

.custom-block.tip a,
.custom-block.tip code {
color: var(--vp-c-green-1);
}

.custom-block.tip a:hover {
color: var(--vp-c-green-2);
}


/**
* Component: Algolia
* -------------------------------------------------------------------------- */
Expand Down
136 changes: 97 additions & 39 deletions docs/src/animations/fade.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,61 +2,119 @@

Use classname `fade-(in|out)-<value>` to define animation's `opacity`.

The `-<value>` part is ***optional***.
- The `-<value>` part is ***optional***.

You can use either any of below as the `<value>`:
- Any number between `0` and `100` including decimals, e.g. `fade-in-50`.
- Any raw value within brackets, e.g. `fade-in-[0.5]`.
- Css variable with either `$foo`, `[--foo]` or `[var(--foo)]`, e.g. `fade-in-$my-css-var`.
<br />

You can use either of below as the `<value>`:

- Any number between `0` and `100` including decimals. E.g. `fade-in-50`
- CSS variable. E.g. `fade-in-$my-css-var`

## Fade In

Define enter animation's starting `opacity`.

The default is `0` if no value is specified.
- The default **value** is `0` if not specified.

```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-[0.5]">Button C</button>
<button class="animate-in fade-in-$my-css-var">Button D</button>
<button class="animate-in fade-in-$my-css-var">Button C</button>
```

| Classname | Property |
|--------------------------------|-------------------------------------------|
| `fade-in` | `--una-enter-opacity: 0;` |
| `fade-in-0` | `--una-enter-opacity: 0;` |
| `fade-in-10` | `--una-enter-opacity: 0.1;` |
| `fade-in-52.1` | `--una-enter-opacity: 0.521;` |
| `fade-in-66.66` | `--una-enter-opacity: 0.6666;` |
| `fade-in-100` | `--una-enter-opacity: 1;` |
| `fade-in-[.8]` | `--una-enter-opacity: .8;` |
| `fade-in-$my-css-var` | `--una-enter-opacity: var(--my-css-var);` |
| `fade-in-[--my-css-var]` | `--una-enter-opacity: var(--my-css-var);` |
| `fade-in-[var(--$my-css-var)]` | `--una-enter-opacity: var(--my-css-var);` |

## Fade out
<table>
<thead>
<tr>
<th>Classname</th>
<th>Property</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>fade-in</code></td>
<td rowspan="2"><code>--una-enter-opacity: 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>
</tr>
<tr>
<td><code>fade-in-.8</code></td>
<td><code>--una-enter-opacity: 0.008;</code></td>
</tr>
<tr>
<td><code>fade-in-52.1</code></td>
<td><code>--una-enter-opacity: 0.521;</code></td>
</tr>
<tr>
<td><code>fade-in-66.66</code></td>
<td><code>--una-enter-opacity: 0.6666;</code></td>
</tr>
<tr>
<td><code>fade-in-100</code></td>
<td><code>--una-enter-opacity: 1;</code></td>
</tr>
<tr>
<td><code>fade-in-$my-css-var</code></td>
<td><code>--una-enter-opacity: var(--my-css-var);</code></td>
</tr>
</tbody>
</table>

## Fade Out

Define exit animation's ending `opacity`.

The default value is `0` if no value is specified.
- The default **value** is `0` if not specified.

```html
<button class="animate-in fade-out">Button A</button>
<button class="animate-in fade-out-50">Button B</button>
<button class="animate-in fade-out-[0.5]">Button C</button>
<button class="animate-in fade-out-$my-css-var">Button D</button>
<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>
```

| Classname | Property |
|---------------------------------|------------------------------------------|
| `fade-out` | `--una-exit-opacity: 0;` |
| `fade-out-0` | `--una-exit-opacity: 0;` |
| `fade-out-10` | `--una-exit-opacity: 0.1;` |
| `fade-out-52.1` | `--una-exit-opacity: 0.521;` |
| `fade-out-66.66` | `--una-exit-opacity: 0.6666;` |
| `fade-out-100` | `--una-exit-opacity: 1;` |
| `fade-out-[.8]` | `--una-exit-opacity: .8;` |
| `fade-out-$my-css-var` | `--una-exit-opacity: var(--my-css-var);` |
| `fade-out-[--my-css-var]` | `--una-exit-opacity: var(--my-css-var);` |
| `fade-out-[var(--$my-css-var)]` | `--una-exit-opacity: var(--my-css-var);` |
<table>
<thead>
<tr>
<th>Classname</th>
<th>Property</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>fade-out</code></td>
<td rowspan="2"><code>--una-exit-opacity: 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>
</tr>
<tr>
<td><code>fade-out-.8</code></td>
<td><code>--una-exit-opacity: 0.008;</code></td>
</tr>
<tr>
<td><code>fade-out-52.1</code></td>
<td><code>--una-exit-opacity: 0.521;</code></td>
</tr>
<tr>
<td><code>fade-out-66.66</code></td>
<td><code>--una-exit-opacity: 0.6666;</code></td>
</tr>
<tr>
<td><code>fade-out-100</code></td>
<td><code>--una-exit-opacity: 1;</code></td>
</tr>
<tr>
<td><code>fade-out-$my-css-var</code></td>
<td><code>--una-exit-opacity: var(--my-css-var);</code></td>
</tr>
</tbody>
</table>
22 changes: 20 additions & 2 deletions docs/src/animations/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,24 @@ E.g. the below code will make the element fade in, zoom in and slide in from top
```
:::

::: warning
Usage of the bracket `[]` syntax is dropped in this preset from **v1.0.0-beta.8**.

This is **intentional** because
- UnoCSS is very flexible, and you don't need to use it at all in this preset.
- The syntax is error-prone and may destroy the whole animation with a single invalid value.

For anything you define in `[]` except specific syntax for CSS variables (e.g. `[--foo]`), it will always use the value inside as is, hence it's very easy to make mistakes.

E.g. the below code will destroy the whole animation since it's not a valid `rotate()` value.
```html
<button class="animate-in spin-in-[30]">Button A</button>
```
It will generate `--una-enter-rotate: 30;`, which lacks a unit and will make the whole `transform` property invalid.

Instead, just write `spin-in-30` or `spin-in-30deg` to make it work, which will generate `--una-enter-rotate: 30deg;`.
:::

## Enter Animations

To give an element enter animations, use the `animate-in` shortcut in combination with [`fade-in`](./fade#fade-in), [`zoom-in`](./zoom#zoom-in), [`spin-in`](./spin#spin-in) and [`slide-in`](./slide#slide-in) classnames.
Expand All @@ -20,7 +38,7 @@ To give an element enter animations, use the `animate-in` shortcut in combinatio
<button class="animate-in fade-in ...">Button A</button>
<button class="animate-in spin-in ...">Button B</button>
<button class="animate-in zoom-in ...">Button C</button>
<button class="animate-in slide-in-from-top ...">Button D</button>
<button class="animate-in slide-in-top ...">Button D</button>
```

## Exit Animations
Expand All @@ -31,5 +49,5 @@ To give an element exit animations, use the `animate-out` shortcut in combinatio
<button class="animate-out fade-out ...">Button A</button>
<button class="animate-out spin-out ...">Button B</button>
<button class="animate-out zoom-out ...">Button C</button>
<button class="animate-out slide-out-to-bottom ...">Button D</button>
<button class="animate-out slide-out-bottom ...">Button D</button>
```
Loading

0 comments on commit 8686655

Please sign in to comment.