-
Notifications
You must be signed in to change notification settings - Fork 170
Description
I've just been playing around with Motion UI for an upcoming internal training session for our move back to Foundation 6. One thing I'm noticing is that I have a block of code like this:
@include mui-series {
.card-inner { @include mui-queue(2s, 2s, slide($direction: right)); }
.card-img { @include mui-queue(1s, 0s, fade); }
.card-title { @include mui-queue(1s, 2s, slide($direction: right)); }
.card-text { @include mui-queue(2s, 0s, fade, spin($direction: ccw), slide($direction: up)); }
}The lines to note are the .card-inner and .card-title which are using the same animation, just staggered slightly apart. When I look at the compiled css, I'm seeing this:
.card-inner {
-webkit-animation-name: slide-in-right-100;
animation-name: slide-in-right-100;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-delay: 0s;
animation-delay: 0s; }
@-webkit-keyframes slide-in-right-100 {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%); }
100% {
-webkit-transform: translateX(0);
transform: translateX(0); } }
@keyframes slide-in-right-100 {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%); }
100% {
-webkit-transform: translateX(0);
transform: translateX(0); } } and then about 20 lines below:
.card-title {
-webkit-animation-name: slide-in-right-100;
animation-name: slide-in-right-100;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: 5s;
animation-delay: 5s; }
@keyframes slide-in-right-100 {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%); }
100% {
-webkit-transform: translateX(0);
transform: translateX(0); } }Is there a reason this is being duplicated? The third slide-in-right-100 seems like it shouldn't be there considering it already exists above. I hesitate to call this a bug, because an extra 7 lines in a css file is not a big deal, but it seems like this should be done.
However, the main reason I'm posting this issue is to find out if there is a better way using motion-ui to re-use animations inside of a series-based functionality like this? The docs are good for basic functionality, but get a little bit hazy when you're trying to do more robust animation work. From looking at the source it doesn't look like I can pass an already-created keyframe animation in?