TWEAK: improve delay expression (#1508)

*  TWEAK: improve delay expression

*  TWEAK: add support for old versions
This commit is contained in:
Waren Gonzaga 2022-04-21 16:51:18 +08:00 committed by GitHub
parent 61d13bad4b
commit e6de97a96b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 825 additions and 711 deletions

File diff suppressed because one or more lines are too long

15
animate.css vendored
View File

@ -42,31 +42,36 @@
-webkit-animation-iteration-count: calc(var(--animate-repeat) * 3); -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
animation-iteration-count: calc(var(--animate-repeat) * 3); animation-iteration-count: calc(var(--animate-repeat) * 3);
} }
.animate__animated.animate__delay-1s { .animate__animated.animate__delay-1s,
.animate__animated.animate__delay-1x {
-webkit-animation-delay: 1s; -webkit-animation-delay: 1s;
animation-delay: 1s; animation-delay: 1s;
-webkit-animation-delay: var(--animate-delay); -webkit-animation-delay: var(--animate-delay);
animation-delay: var(--animate-delay); animation-delay: var(--animate-delay);
} }
.animate__animated.animate__delay-2s { .animate__animated.animate__delay-2s,
.animate__animated.animate__delay-2x {
-webkit-animation-delay: calc(1s * 2); -webkit-animation-delay: calc(1s * 2);
animation-delay: calc(1s * 2); animation-delay: calc(1s * 2);
-webkit-animation-delay: calc(var(--animate-delay) * 2); -webkit-animation-delay: calc(var(--animate-delay) * 2);
animation-delay: calc(var(--animate-delay) * 2); animation-delay: calc(var(--animate-delay) * 2);
} }
.animate__animated.animate__delay-3s { .animate__animated.animate__delay-3s,
.animate__animated.animate__delay-3x {
-webkit-animation-delay: calc(1s * 3); -webkit-animation-delay: calc(1s * 3);
animation-delay: calc(1s * 3); animation-delay: calc(1s * 3);
-webkit-animation-delay: calc(var(--animate-delay) * 3); -webkit-animation-delay: calc(var(--animate-delay) * 3);
animation-delay: calc(var(--animate-delay) * 3); animation-delay: calc(var(--animate-delay) * 3);
} }
.animate__animated.animate__delay-4s { .animate__animated.animate__delay-4s,
.animate__animated.animate__delay-4x {
-webkit-animation-delay: calc(1s * 4); -webkit-animation-delay: calc(1s * 4);
animation-delay: calc(1s * 4); animation-delay: calc(1s * 4);
-webkit-animation-delay: calc(var(--animate-delay) * 4); -webkit-animation-delay: calc(var(--animate-delay) * 4);
animation-delay: calc(var(--animate-delay) * 4); animation-delay: calc(var(--animate-delay) * 4);
} }
.animate__animated.animate__delay-5s { .animate__animated.animate__delay-5s,
.animate__animated.animate__delay-5x {
-webkit-animation-delay: calc(1s * 5); -webkit-animation-delay: calc(1s * 5);
animation-delay: calc(1s * 5); animation-delay: calc(1s * 5);
-webkit-animation-delay: calc(var(--animate-delay) * 5); -webkit-animation-delay: calc(var(--animate-delay) * 5);

2
animate.min.css vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -953,7 +953,7 @@ document.documentElement.style.setProperty('--animate-duration', '.5s');
<p>Animate.css comes packed with a few utility classes to simplify its use.</p> <p>Animate.css comes packed with a few utility classes to simplify its use.</p>
<h3>Delay classes</h3> <h3>Delay classes</h3>
<p>You can add delays directly on the element's class attribute, just like this:</p> <p>You can add delays directly on the element's class attribute, just like this:</p>
<pre><code class="language-html">&lt;div class=&quot;animate__animated animate__bounce animate__delay-2s&quot;&gt;Example&lt;/div&gt; <pre><code class="language-html">&lt;div class=&quot;animate__animated animate__bounce animate__delay-2x&quot;&gt;Example&lt;/div&gt;
</code></pre> </code></pre>
<p>Animate.css provides the following delays:</p> <p>Animate.css provides the following delays:</p>
<table> <table>
@ -965,23 +965,26 @@ document.documentElement.style.setProperty('--animate-duration', '.5s');
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td><code>animate__delay-2s</code></td> <td><code>animate__delay-2x</code></td>
<td><code>2s</code></td> <td><code>2s</code></td>
</tr> </tr>
<tr> <tr>
<td><code>animate__delay-3s</code></td> <td><code>animate__delay-3x</code></td>
<td><code>3s</code></td> <td><code>3s</code></td>
</tr> </tr>
<tr> <tr>
<td><code>animate__delay-4s</code></td> <td><code>animate__delay-4x</code></td>
<td><code>4s</code></td> <td><code>4s</code></td>
</tr> </tr>
<tr> <tr>
<td><code>animate__delay-5s</code></td> <td><code>animate__delay-5x</code></td>
<td><code>5s</code></td> <td><code>5s</code></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<blockquote>
<p>In the previous versions, the library supported a slightly different version of the classes, like <code>animate__delay-2s</code>. As this utility works as a multiplier, it made it very confusing to use if the root variable <code>--animate-delay</code> was set to anything but <code>1</code>. We changed it but we still support the old classes and there's no need to migrate your code to the newer version.</p>
</blockquote>
<p>The provided delays are from 1 to 5 seconds. You can customize them setting the <code>--animate-delay</code> property to a longer or a shorter duration:</p> <p>The provided delays are from 1 to 5 seconds. You can customize them setting the <code>--animate-delay</code> property to a longer or a shorter duration:</p>
<pre><code class="language-css">/* All delay classes will take 2x longer to start */ <pre><code class="language-css">/* All delay classes will take 2x longer to start */
:root { :root {

View File

@ -7,17 +7,19 @@ Animate.css comes packed with a few utility classes to simplify its use.
You can add delays directly on the element's class attribute, just like this: You can add delays directly on the element's class attribute, just like this:
```html ```html
<div class="animate__animated animate__bounce animate__delay-2s">Example</div> <div class="animate__animated animate__bounce animate__delay-2x">Example</div>
``` ```
Animate.css provides the following delays: Animate.css provides the following delays:
| Class name | Default delay time | | Class name | Default delay time |
| ------------------- | ------------------ | | ------------------- | ------------------ |
| `animate__delay-2s` | `2s` | | `animate__delay-2x` | `2s` |
| `animate__delay-3s` | `3s` | | `animate__delay-3x` | `3s` |
| `animate__delay-4s` | `4s` | | `animate__delay-4x` | `4s` |
| `animate__delay-5s` | `5s` | | `animate__delay-5x` | `5s` |
> In the previous versions, the library supported a slightly different version of the classes, like `animate__delay-2s`. As this utility works as a multiplier, it made it very confusing to use if the root variable `--animate-delay` was set to anything but `1`. We changed it but we still support the old classes and there's no need to migrate your code to the newer version.
The provided delays are from 1 to 5 seconds. You can customize them setting the `--animate-delay` property to a longer or a shorter duration: The provided delays are from 1 to 5 seconds. You can customize them setting the `--animate-delay` property to a longer or a shorter duration:

View File

@ -19,23 +19,28 @@
animation-iteration-count: calc(var(--animate-repeat) * 3); animation-iteration-count: calc(var(--animate-repeat) * 3);
} }
.animated.delay-1s { .animated.delay-1s,
.animated.delay-1x {
animation-delay: var(--animate-delay); animation-delay: var(--animate-delay);
} }
.animated.delay-2s { .animated.delay-2s,
.animated.delay-2x {
animation-delay: calc(var(--animate-delay) * 2); animation-delay: calc(var(--animate-delay) * 2);
} }
.animated.delay-3s { .animated.delay-3s,
.animated.delay-3x {
animation-delay: calc(var(--animate-delay) * 3); animation-delay: calc(var(--animate-delay) * 3);
} }
.animated.delay-4s { .animated.delay-4s,
.animated.delay-4x {
animation-delay: calc(var(--animate-delay) * 4); animation-delay: calc(var(--animate-delay) * 4);
} }
.animated.delay-5s { .animated.delay-5s,
.animated.delay-5x {
animation-delay: calc(var(--animate-delay) * 5); animation-delay: calc(var(--animate-delay) * 5);
} }

1475
yarn.lock

File diff suppressed because it is too large Load Diff