Neatly Punctuated Musings

    vue-tsx-keyframes
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.7 • Public • Published

    CircleCI MIT License npm version

    vue-tsx-keyframes

    library of keyframes as CSS in JS with using vue-tsx-support

    Usage

    Create vue-cli project, and install vue-tsx-support

    Install from npm:

    yarn add -D vue-tsx-keyframes # npm install --save-dev vue-tsx-keyframes 

    In your .tsx file, add @keyframes enclosed backquote

    data() {
      return {
        horizontalFrame: `
          @keyframes horizontal {
            0% {
              transform:translateX(-8px);
            }
            100% {
              transform:translateX(8px);
            }
          }
        `
      };
    }

    Import vue-tsx-keyframes

    import keyframes from "vue-tsx-keyframes";

    Add keyframes in mounted()

    mounted() {
      keyframes(this.horizontalFrame);
    }

    Sample : https://github.com/shuta13/vue-tsx-sample/blob/master/src/components/CssInJs.tsx

    Install

    npm i vue-tsx-keyframes

    DownloadsWeekly Downloads

    1

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    14.7 kB

    Total Files

    19

    Last publish

    Collaborators

    • did0es