search

asika32764 / vue-animate

A port of Animate.css for use with transitions in Vue.js 2.0 / 3.0 and Alpine.js.
https://vue-animate.simular.co/
Other
1.36k stars 132 forks source link

Add option to unquote animation names #20

Closed turizoft closed 6 years ago

turizoft commented 6 years ago

Helps fixing a bug where browser won't parse quoted animation names. By default animation names should not contain quotes.

https://developer.mozilla.org/es/docs/Web/CSS/animation-name

Example of code generated by this library:

.fadeLeft-enter-active, .fadeInLeft {
    animation-name: "fadeInLeft";
}

This will be marked as invalid inChrome Version 67.0.3396.99 (Official Build) (64-bit)

This PR adds the quoteAnimationNames variable, which will generate unquoted animation names when set as false. It is set as true for backwards compatibility.

Usage:

$animationDuration: 600ms;
$quoteAnimationNames: false;
@import 'vue2-animate/src/sass/vue2-animate';

Related Issues

Chromium Forums

asika32764 commented 6 years ago

how about we set $quoteAnimationNames to false as default and I push a minor version to 2.1.0?

I guess it won't break much B/C.