CODEWITHSUNDEEP
csssasscss-animationskeyframe
Joel Hoelting
Joel Hoelting

Reputation: 1992

Sass mixins: having issues with translateX and translateY

I created a mixin to animate opacity and horizontal/vertical position. I've read through the documentation on SASS site. The mixin currently animates the opacity but fails to move elements -- translateX and translateY.

@mixin keyframes($animation-name, $axis, $start, $end) {
  @keyframes #{$animation-name} {
    0% {
      opacity: 0;
      transform: #{$axis}(#{$start});
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 1;
      transform: #{$axis}(#{$end});
    }
  }
}

@include keyframes(slideLeft, translateX, 0, 200px);

.slide-left {
  animation: slideLeft 2s ease .1s forwards;
}

.redbox {
  opacity: 0;
  height: 100px;
  width: 100px;
  background: red;
}
<div class="redbox slide-left">
</div>

Here is a link to the JS fiddle that supports SCSS: enter link description here

I've been banging my head for a while trying to figure out what I'm doing wrong. Any help appreciated.

Upvotes: 1

Views: 769

Answers (1)

muecas
muecas

Reputation: 4335

The problem is how Sass is compiling the code. You need to use a literal string for the definition of the transform value (the translate function). So you need to create the value of the property as a string and then use the unquote function to output the value:

@mixin keyframes($animation-name, $axis, $start, $end) {
    @keyframes #{$animation-name} {
        0% {
            opacity: 0;
            transform: unquote("#{$axis}(#{$start})");
        }

        50% {
            opacity: 1;
        }

        100% {
            opacity: 1;
            transform: unquote("#{$axis}(#{$end})");
        }
    }
}

Demo here.

Hope it helps.

Upvotes: 2

Related Questions