@@ -116,6 +116,7 @@ aside: false
116
116
duration : val => validateAnimationFormField .timePropertyValidation (val),
117
117
delay : val => validateAnimationFormField .timePropertyValidation (val),
118
118
staggerDelay : val => validateAnimationFormField .timePropertyValidation (val),
119
+ angle : val => val .match (/ ^ \- ? (\d + | \d + \. \d + )(deg)? $ / ),
119
120
}
120
121
121
122
function resetAnimation (animName , {opts}) {
@@ -133,16 +134,21 @@ aside: false
133
134
angle: ' 0deg'
134
135
}
135
136
137
+ const numberRegEx = opts .angle ? / ^ \- ? (\d + | \d + \. \d + )$ / : / ^ (\d + | \d + \. \d + )$ / ;
136
138
if (opts .maintainSpace ) opts .dimensionsTransition = false ;
137
139
if (! validateAnimationFormField .blur (opts .blur )) opts .blur = defaultValue .blur ;
138
140
if (! validateAnimationFormField .easing (opts .easing ))
139
141
opts .easing = defaultValue .easing ;
140
142
[' duration' , ' delay' , ' staggerDelay' ].forEach (prop => {
141
- if (opts[prop].match (/ ^ ( \d + | \d + \. \d + ) $ / )) opts[prop] = ` ${ opts[prop]} ms` ;
143
+ if (opts[prop].match (numberRegEx )) opts[prop] = ` ${ opts[prop]} ms` ;
142
144
else if (! validateAnimationFormField[prop](opts[prop])) {
143
145
opts[prop] = defaultValue[prop];
144
146
}
145
147
});
148
+ if (opts .angle ) {
149
+ if (! validateAnimationFormField .angle (opts .angle )) opts .angle = defaultValue .angle
150
+ else if (opts .angle .match (numberRegEx)) opts .angle = Number (opts .angle );
151
+ }
146
152
147
153
const animation = [ ' slide' , ' rotations' ].includes (animName)
148
154
? (triggerSelector .replace (' --btn' ,' ' )
@@ -318,15 +324,15 @@ _Notice that when toggling back up from any rotation, the element will rotate in
318
324
:title="' Custom Rotation' "
319
325
:btn-list="examples.rotate.btnList"
320
326
:content-list="examples.rotate.contentList"
321
- :anim-opts="{} "
327
+ :anim-opts="customRotateOpts "
322
328
:fields-list="[' duration' , ' delay' , ' angle' , ' easing' , ' transfOrigin' ]"
323
329
@reset-animation="(opts) => {resetAnimation(' rotate' , opts)}"
324
330
:animation-form-validation="validateAnimationFormField"
325
331
:code-snippet="{
326
332
code: `jsCssAnimations.init.rotate({
327
333
trigger: ' .rotate -- btn' ,
328
334
targetSelector: ' .example__rotate ' ,
329
- angle: 155
335
+ angle: 155,
330
336
});
331
337
`
332
338
}">
@@ -355,6 +361,8 @@ code: `jsCssAnimations.init.rotate({
355
361
margin: 1rem auto;
356
362
padding-top: 0.25em;
357
363
border-radius: 50%;
364
+ position: relative;
365
+ z-index: -1;
358
366
}
359
367
360
368
.rotation-area--text {
0 commit comments