twindy/src/mixins/animation.styl

CSS Framework written in Stylus inspired by Tailwind and NIB

// (C)opyright 2020-11-17 Dirk Holtwick, holtwick.it. All rights reserved.

// Taken from https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.css
@require "base.styl";

// Don't add vendor prefixes, not needed any more
// https://stylus-lang.com/docs/keyframes.html
// vendors = moz webkit ms official
__tw_keyframes() {
  if __tw_once("animations") {
    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes ping {
      75%, 100% {
        transform: scale(2);
        opacity: 0;
      }
    }

    @keyframes pulse {
      50% {
        opacity: 0.5;
      }
    }

    @keyframes bounce {
      0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
      }

      50% {
        transform: none;
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
      }
    }
  }

  // https://github.com/animate-css/animate.css/blob/main/source/attention_seekers/headShake.css
  @keyframes headShake {
    animation-timing-function: ease-in-out;

    0% {
      transform: translateX(0);
    }

    6.5% {
      transform: translateX(-6px) rotateY(-9deg);
    }

    18.5% {
      transform: translateX(5px) rotateY(7deg);
    }

    31.5% {
      transform: translateX(-3px) rotateY(-5deg);
    }

    43.5% {
      transform: translateX(2px) rotateY(3deg);
    }

    50% {
      transform: translateX(0);
    }
  }
}

-ease-linear = linear;
-ease-in = cubic-bezier(0.4, 0, 1, 1);
-ease-out = cubic-bezier(0, 0, 0.2, 1);
-ease-in-out = cubic-bezier(0.4, 0, 0.2, 1);
-animation-none = none;
-animation-spin = spin 1s linear infinite;
-animation-ping = ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
-animation-pulse = pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-animation-bounce = bounce 1s infinite;

animation-spin() {
  __tw_keyframes();

  animation: -animation-spin;
}

animation-ping() {
  __tw_keyframes();

  animation: -animation-ping;
}

animation-pulse() {
  __tw_keyframes();

  animation: -animation-pulse;
}

animation-bounce() {
  __tw_keyframes();

  animation: -animation-bounce;
}

tw-animation(value = bounce) {
  def = lookup("-animation-" + value);

  if def != null {
    __tw_keyframes();

    animation: def;
  } else {
    error("Undefined animation preset: " + value);
  }
}

// Transformations
transform-translate(x = 0, y = 0) {
  --transform-translate-x: x;
  --transform-translate-y: (y || x);
}

transform-rotate(value) {
  --transform-rotate: unit(value, deg);
}

transform-scale(x = 0, y = 0) {
  --transform-scale-x: (x / 100);
  --transform-scale-y: ((y || x) / 100);
}

transform-skew(x = 0, y = 0) {
  --transform-skew-x: unit(x, deg);
  --transform-skew-y: unit(y || x, deg);
}

tw-transform() {
  transform: translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0)) rotate(var(--transform-rotate, 0)) skewX(var(--transform-skew-x, 0)) skewY(var(--transform-skew-y, 0)) scaleX(var(--transform-scale-x, 1)) scaleY(var(--transform-scale-y, 1));
}

tw-transform-gpu() {
  transform: translate3d(var(--transform-translate-x, 0), var(--transform-translate-y, 0), 0) rotate(var(--transform-rotate, 0)) skewX(var(--transform-skew-x, 0)) skewY(var(--transform-skew-y, 0)) scaleX(var(--transform-scale-x, 1)) scaleY(var(--transform-scale-y, 1));
}

// Transition
// https://tailwindcss.com/docs/transition-property
// defaults:
-transition-all = all;
-transition-none = none;
-transition-opacity = opacity;
-transition-transform = transform, -webkit-transform;
-transition-default = background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, -webkit-transform;
-transition-colors = background-color, border-color, color, fill, stroke;
-transition-shadow = box-shadow;
-transition-box-shadow = box-shadow;
-transition-base = -transition-default;

// transition(value = ())
// if @transition-timing-function is a "null"
// transition-timing-function -ease-in-out

// if @transition-duration is a "null"
// transition-duration 150ms

// if value is a "null" && @transition-property is a "null"
// transition-property -transition-default
// else if value is a "ident" && lookup("-transition-" + value)
// transition-property lookup("-transition-" + value)
// else
// transition value

// Call +vue-animation-start
vue-animation-start() {
  &-enter-active, &-leave-active {
    {block};
  }
}

vue-animation-end() {
  &-enter, &-leave-to {
    {block};
  }
}

/* Example:

https://v3.vuejs.org/guide/transitions-enterleave.html#transitioning-single-elements-components

<transition name="fade">
  <p v-if="show">hello</p>
</transition>

.fade  
  +vue-animation-start()
    transition opacity 0.5s ease

  +vue-animation-end()
    opacity 0

*/