Skip to content

Commit b786f67

Browse files
tmorehousetmorehouse
authored
chore(icons): updates to CSS animations (#4945)
Co-authored-by: Jacob Müller
1 parent 7735729 commit b786f67

File tree

3 files changed

+153
-32
lines changed

3 files changed

+153
-32
lines changed

‎src/_variables.scss

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,15 @@ $b-custom-file-height-inner-sm: calc(
6161

6262
// --- Icons ---
6363

64+
$b-icon-vertical-offset: -0.15em;
65+
6466
// Animations
6567
$b-icon-animation-spin-duration: 2s !default;
66-
$b-icon-animation-pulse-duration: 1s !default;
68+
$b-icon-animation-spin-reverse-duration: $b-icon-animation-spin-duration !default;
69+
$b-icon-animation-spin-pulse-duration: 1s !default;
70+
$b-icon-animation-spin-reverse-pulse-duration: $b-icon-animation-spin-pulse-duration !default;
6771
$b-icon-animation-cylon-duration: 0.75s !default;
72+
$b-icon-animation-cylon-vertical-duration: $b-icon-animation-cylon-duration !default;
6873

6974
// --- Tables ---
7075

‎src/icons/README.md

Lines changed: 90 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -432,32 +432,53 @@ affected. If you need to shift the border/background with the icon, use Bootstra
432432

433433
<span class="badge badge-info small">v2.7.0+</span>
434434

435-
BootstrapVue includes two spinning animation options for icons: `spin` and `pulse`. Both animations
436-
spin the icon clockwise, but pulse uses a stepped spin. A third animation called `cylon` is also
437-
provided.
435+
BootstrapVue includes the following built-in animations for icons:
438436

439-
To use the spin animation, set the `animation` prop to one of the animation names `'spin'`,
440-
`'pulse'` or `'cylon'`.
437+
- `'spin'` smoothly spins the icon clockwise
438+
- `'spin-reverse'` smoothly spins the icon counter-clockwise
439+
- `'spin-pulse'` spins the icon clockwise, but in a pulsed step style
440+
- `'spin-reverse-pulse'` spins the icon counter-clockwise, but in a pulsed step style
441+
- `'cylon'` slides the icon left-right
442+
- '`cylon-vertical'` slides the icon up-down
443+
444+
To use the animation, set the `animation` prop to one of the animation names above.
441445

442446
```html
443447
<template>
444-
<div>
445-
<p>Spinning animation:</p>
446-
<b-icon icon="arrow-clockwise" animation="spin" font-scale="4"></b-icon>
447-
448-
<p class="mt-3">Pulsing animation:</p>
449-
<b-icon icon="arrow-clockwise" animation="pulse" font-scale="4"></b-icon>
450-
451-
<p class="mt-3">Cylon animation:</p>
452-
<b-icon icon="three-dots" animation="cylon" font-scale="4"></b-icon>
448+
<b-row class="text-md-center">
449+
<b-col md="6" class="mb-3">
450+
<p>Spinning animation:</p>
451+
<b-icon icon="arrow-clockwise" animation="spin" font-scale="4"></b-icon>
452+
</b-col>
453+
<b-col md="6" class="mb-3">
454+
<p>Reverse spinning animation:</p>
455+
<b-icon icon="arrow-counterclockwise" animation="spin-reverse" font-scale="4"></b-icon>
456+
</b-col>
457+
<b-col md="6" class="mb-3">
458+
<p>Pulsing spin animation:</p>
459+
<b-icon icon="arrow-clockwise" animation="spin-pulse" font-scale="4"></b-icon>
460+
</b-col>
461+
<b-col md="6" class="mb-3">
462+
<p>Reversed pulsing spin animation:</p>
463+
<b-icon icon="arrow-counterclockwise" animation="spin-reverse-pulse" font-scale="4"></b-icon>
464+
</b-col>
465+
<b-col md="6" class="mb-3">
466+
<p>Cylon animation:</p>
467+
<b-icon icon="three-dots" animation="cylon" font-scale="4"></b-icon>
468+
</b-col>
469+
<b-col md="6" class="mb-3">
470+
<p>Vertical cylon animation:</p>
471+
<b-icon icon="three-dots-vertical" animation="cylon-vertical" font-scale="4"></b-icon>
472+
</b-col>
453473
</div>
454474
</template>
455475

456-
<!-- b-icon-spin-aminations.vue -->
476+
<!-- b-icon-aminations.vue -->
457477
```
458478

459-
Note with the `cylon` animation, the left-right movement extends past the icon's bounding box by
460-
`25%`, so you may need to adjust padding or margins to compensate for your use case.
479+
Note with the `cylon` animations, the left-right movement (or up-down movement) extends past the
480+
icon's bounding box by `+/- 25%`, so you may need to adjust padding or margins to compensate for
481+
your use case.
461482

462483
As the animations are CSS based, they are applied _after_ any SVG transforms have taken place:
463484

@@ -468,7 +489,7 @@ As the animations are CSS based, they are applied _after_ any SVG transforms hav
468489
</div>
469490
</template>
470491

471-
<!-- b-icon-spin-aminations-transforms.vue -->
492+
<!-- b-icon-aminations-transforms.vue -->
472493
```
473494

474495
The BootstrapVue defined icon animation effects require BootstrapVue's custom CSS. The `animation`
@@ -538,20 +559,66 @@ individual icons (`<b-icon>` or `<b-icon-{icon-name}>`) to create complex icons:
538559
</div>
539560
</template>
540561

541-
<!-- icons-stacking.vue -->
562+
<!-- b-iconsstack.vue -->
542563
```
543564

544-
`<b-iconstack>` supports the same `variant`, `font-size`, and transformation props available on
545-
individual icons.
565+
`<b-iconstack>` supports the same `variant`, `font-size`, `animation` and transformation props
566+
available on individual icons.
546567

547568
Stacked icon notes:
548569

549570
- Remember to set the `stacked` prop on the inner icon components
550571
- The `font-scale` prop cannot be used on the inner icon components
551572
- The `width` and `height` attributes cannot be applied to the inner icon components
552573
- Stacked icons **cannot** be stacked inside another `<b-iconstack>`
553-
- Note the animation props on the child icons will have no effect, however you _can_ use the
554-
animation props on the `<b-iconstack>` component.
574+
575+
### Stacked icon animation
576+
577+
The `<b-iconstack>` component supports the same animations as individual icons:
578+
579+
```html
580+
<template>
581+
<div>
582+
<b-iconstack font-scale="5" animation="spin">
583+
<b-icon stacked icon="camera" variant="info" scale="0.75" shift-v="-0.25"></b-icon>
584+
<b-icon stacked icon="circle-slash" variant="danger"></b-icon>
585+
</b-iconstack>
586+
</div>
587+
</template>
588+
589+
<!-- b-iconstack-animation.vue -->
590+
```
591+
592+
Individual icons within the icon stack can also be animated (except on IE 11):
593+
594+
```html
595+
<template>
596+
<div>
597+
<b-iconstack font-scale="5" animation="cylon">
598+
<b-icon
599+
stacked
600+
icon="camera"
601+
animation="spin"
602+
variant="info"
603+
scale="0.75"
604+
shift-v="-0.25"
605+
></b-icon>
606+
<b-icon stacked icon="circle-slash" variant="danger"></b-icon>
607+
</b-iconstack>
608+
</div>
609+
</template>
610+
611+
<!-- b-iconstack-animation-child-icons.vue -->
612+
```
613+
614+
**Notes:**
615+
616+
- IE 11 does not support animation of child elements within an SVG, hence only the `<b-iconstack>`
617+
component can be animated. The child icon(s) animation will not be visible to IE 11 users.
618+
- The BootstrapVue defined animation effects of this component is dependent on the
619+
`prefers-reduced-motion` media query. See the
620+
[reduced motion section of our accessibility documentation](/docs/reference/accessibility) for
621+
additional details.
555622

556623
## Using in components
557624

‎src/icons/_icons.scss

Lines changed: 57 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,68 @@
55
overflow: visible;
66
// The following is required to compensate for alignment
77
// issues with the Bootstrap Icons alpha implementation
8-
// And might be able to remove in future version of bootstrap-icons
9-
// Perhaps this values should be SASS variables?
10-
vertical-align: -0.15em;
8+
// TODO: Is this "hack" still required?
9+
vertical-align: $b-icon-vertical-offset;
1110
}
1211

13-
&.b-icon-animation-spin {
14-
animation: $b-icon-animation-spin-duration infinite linear b-icon-animation-spin;
12+
&.b-icon-animation-spin,
13+
&.b-iconstack .b-icon-animation-spin > g {
14+
transform-origin: center;
15+
animation: $b-icon-animation-spin-duration infinite linear normal b-icon-animation-spin;
16+
17+
@media (prefers-reduced-motion: reduce) {
18+
animation: none;
19+
}
20+
}
21+
22+
&.b-icon-animation-spin-reverse,
23+
&.b-iconstack .b-icon-animation-spin-reverse > g {
24+
transform-origin: center;
25+
animation: $b-icon-animation-spin-reverse-duration infinite linear reverse b-icon-animation-spin;
26+
1527
@media (prefers-reduced-motion: reduce) {
1628
animation: none;
1729
}
1830
}
1931

20-
&.b-icon-animation-pulse {
21-
animation: $b-icon-animation-pulse-duration infinite steps(8) b-icon-animation-spin;
32+
&.b-icon-animation-spin-pulse,
33+
&.b-iconstack .b-icon-animation-spin-pulse > g {
34+
transform-origin: center;
35+
animation: $b-icon-animation-spin-pulse-duration infinite steps(8) normal b-icon-animation-spin;
36+
37+
@media (prefers-reduced-motion: reduce) {
38+
animation: none;
39+
}
40+
}
41+
42+
&.b-icon-animation-spin-reverse-pulse,
43+
&.b-iconstack .b-icon-animation-spin-reverse-pulse > g {
44+
transform-origin: center;
45+
animation: $b-icon-animation-spin-reverse-pulse-duration infinite steps(8) reverse
46+
b-icon-animation-spin;
47+
2248
@media (prefers-reduced-motion: reduce) {
2349
animation: none;
2450
}
2551
}
2652

27-
&.b-icon-animation-cylon {
53+
&.b-icon-animation-cylon,
54+
&.b-iconstack .b-icon-animation-cylon > g {
55+
transform-origin: center;
2856
animation: $b-icon-animation-cylon-duration infinite ease-in-out alternate
2957
b-icon-animation-cylon;
58+
59+
@media (prefers-reduced-motion: reduce) {
60+
animation: none;
61+
}
62+
}
63+
64+
&.b-icon-animation-cylon-vertical,
65+
&.b-iconstack .b-icon-animation-cylon-vertical > g {
66+
transform-origin: center;
67+
animation: $b-icon-animation-cylon-vertical-duration infinite ease-in-out alternate
68+
b-icon-animation-cylon-vertical;
69+
3070
@media (prefers-reduced-motion: reduce) {
3171
animation: none;
3272
}
@@ -52,6 +92,15 @@
5292
}
5393
}
5494

95+
@keyframes b-icon-animation-cylon-vertical {
96+
0% {
97+
transform: translateY(25%);
98+
}
99+
100% {
100+
transform: translateY(-25%);
101+
}
102+
}
103+
55104
// Make icons slightly larger in buttons, nav-links, dropdowns, and input-group-text
56105
.btn,
57106
.nav-link,

0 commit comments

Comments
 (0)