| title |
|---|
AnimAttr |
<div
class="test"
v-animattr :length="2"
/>
<style>
.test {
width: 250px;
height: 250px;
border-radius: 100%;
background-color: darkgreen;
transition: background 500ms ease;
}
.test[data-animattr~="0"] {
background-color: darkorange;
}
.test[data-animattr~="1"] {
background-color: darkred;
}
</style>Click here for more information.
Clicks: {{ $slidev.nav.clicks }}
The v-animattr directive can either be configured with various attributes (start, stop, length, stride, clicks),
or by passing an object to the directive as an argument.
The following examples are thus similar:
<div v-animattr :start="3" :length="5" :stride="2" />
<div v-animattr="{start: 3, length: 5, stride: 2}" />It also accepts a few shorthand syntax forms, for commonly used tasks:
<div v-animattr :length="3" />
<div v-animattr="3" /><div v-animattr :clicks="[0,2,3,9]" />
<div v-animattr="[0,2,3,9]" />This addon also allows you to start and stop SMIL animations of your SVG files.
Simply add a smil argument, which can either be an array of animation IDs to execute or an object where the keys are the indices at which to run.
Multiple IDs can be separated by spaces.
Note that the indices represent the data-animattr attribute values and not the slidev click value.
<MySVGFile :length="3" :smil="['anim1 anim2', '', 'anim3']" />
<MySVGFile :length="3" :smil="{0: 'anim1 anim2', 2: 'anim2'}" />You can prepend the IDs with a + or - to either start or stop the animation.
Use a ~ to tell the directive to stop the animation at the end of a cycle (before repeating).
<MySVGFile :length="2" :smil="['+anim1', '-anim1']" />If you only want to execute the animation when moving forwards through your slides, prepend it with >.
< means it will run when moving backwards through the slides.
This can be combined with +, - and ~.
<MySVGFile :length="2" :smil="['>anim1_fw <anim1_bw', '>~anim1_fw']" />The styles can also be placed inside the SVG file,
allowing for more reusable components.
They will then be loaded as scoped CSS
and not pollute other SVGs.
Additionally, you can add the attributes for the
v-animattr directive as data-* attributes in the SVG file as well (eg. data-length="1").
<!-- components/CustomRect.svg -->
<svg viewBox="0 0 100 100">
<rect
width="50" height="50" x="25" y="25"
fill="transparent" stroke="#4C72B0"
stroke-width="5px" stroke-linecap="square"
pathLength="1"
/>
</svg><!-- slides.md -->
<CustomRect v-animattr :start="0" :length="1"/>
<style>
svg[data-animattr] rect {
stroke-dasharray: 1;
stroke-dashoffset: 0;
transition: stroke-dashoffset 250ms ease-in;
}
svg[data-animattr~="0"] rect {
stroke-dashoffset: 1;
}
</style><!-- slides.md -->
<MorphPolygon v-animattr :length="3" :start="0" :smil="{0: '<~morph', 1: '+morph', 2: '-morph'}" /><!-- components/MorphPolygon.svg -->
<svg width="250px" viewBox="0 0 100 100">
<polygon fill="#4C72B0" points="25,25 25,75 75,75 75,25">
<animate
id="morph"
begin="indefinite" dur="3s" fill="freeze" repeatCount="indefinite"
attributeName="points"
values="25,25 25,75 75,75 75,25 ; 50,25 25,75 75,75 50,25 ; 25,25 25,75 75,75 75,25 ; 25,25 50,75 50,75, 75,25 ; 25,25 25,75 75,75 75,25"
keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
/>
</polygon>
</svg><style> h1 { @apply !text-4xl uppercase font-light; } a { border: none !important; transition: 100ms ease transform; } a:focus-visible, a:hover, a:active { transform: scale(1.2); } </style>