Merge pull request #12 from hisasann/feature/add-animejs

feat: add animejs

Author: hisasann

package.json

@@ -53,6 +53,7 @@
     "@nuxtjs/sentry": "^2.3.2",
     "@types/webpack": "^4.4.27",
     "@ungap/url-search-params": "^0.1.2",
+    "animejs": "^3.0.1",
     "body-parser": "^1.18.3",
     "cross-env": "^5.2.0",
     "express": "^4.16.4",
@@ -69,6 +70,7 @@
     "@nuxtjs/eslint-config": "^0.0.1",
     "@nuxtjs/style-resources": "^0.1.2",
     "@storybook/vue": "^5.0.6",
+    "@types/animejs": "^2.0.2",
     "@types/babel-core": "6.25.6",
     "@types/eslint": "^4.16.6",
     "@types/eslint-plugin-prettier": "2.2.0",

src/pages/example/animejs.vue

@@ -0,0 +1,42 @@
+<template lang="pug">
+section.container
+  h1.title
+    | animjs
+  div
+    .anime(ref="anime" @click="click")
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'nuxt-property-decorator'
+import anime from 'animejs'
+
+@Component
+export default class extends Vue {
+  public click(e) {
+    anime({
+      targets: this.$refs.anime,
+      translateX: 250,
+      begin: function(anim) {
+        console.log('began : ' + anim.began)
+      },
+      complete: function(anim) {
+        console.log('completed : ' + anim.completed)
+      }
+    })
+  }
+
+  public head() {
+    return {
+      title: 'animejs'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.anime {
+  width: 200px;
+  height: 200px;
+  background-color: crimson;
+}
+</style>

src/pages/example/index.vue

@@ -6,65 +6,47 @@ section
     |  - nuxtClientInit has been called is {{ isClientInitCalled }}
   hr
   p
-    nuxt-link(to='/example/auth/require-auth')
-      | require-auth
+    nuxt-link(to='/example/auth/require-auth') require-auth
   p
-    nuxt-link(to='/example/ajax/color', no-prefetch)
-      | color
+    nuxt-link(to='/example/ajax/color', no-prefetch) color
   p
-    nuxt-link(to='/example/ajax/schema')
-      | schema
+    nuxt-link(to='/example/ajax/schema') schema
   p
-    nuxt-link(to='/example/ajax/custom-http-headers')
-      | custom-http-headers
+    nuxt-link(to='/example/ajax/custom-http-headers') custom-http-headers
   p
-    nuxt-link(to='/example/c-01/e-02/', no-prefetch)
-      | custom-path /c-01/e-02/
+    nuxt-link(to='/example/c-01/e-02/', no-prefetch) custom-path /c-01/e-02/
   p
-    n-link(to='/example/d-03/f-04/')
-      | custom-path /d-03/f-04/
+    n-link(to='/example/d-03/f-04/') custom-path /d-03/f-04/
   p
-    nuxt-link(to='/example/assets-and-static', no-prefetch)
-      | assets and static
+    nuxt-link(to='/example/assets-and-static', no-prefetch) assets and static
   p
-    nuxt-link(to='/example/todos')
-      | todos
+    nuxt-link(to='/example/todos') todos
   p
-    nuxt-link(to='/example/life-cycle', no-prefetch)
-      | life-cycle
+    nuxt-link(to='/example/life-cycle', no-prefetch) life-cycle
   p
-    nuxt-link(to='/example/use-plugin')
-      | use-plugin
+    nuxt-link(to='/example/use-plugin') use-plugin
   p
-    nuxt-link(to='/example/custom-head', no-prefetch)
-      | custom-head
+    nuxt-link(to='/example/custom-head', no-prefetch) custom-head
   p
-    nuxt-link(to='/example/async-custom-head', no-prefetch)
-      | async-custom-head
+    nuxt-link(to='/example/async-custom-head', no-prefetch) async-custom-head
   p
-    nuxt-link(to='/example/api')
-      | api
+    nuxt-link(to='/example/api') api
   p
-    nuxt-link(to='/example/search/?hoge=foo&bar=fuga', no-prefetch)
-      | search
+    nuxt-link(to='/example/search/?hoge=foo&bar=fuga', no-prefetch) search
   p
-    nuxt-link(to='/example/img-lazy-load')
-      | img-lazy-load
+    nuxt-link(to='/example/img-lazy-load') img-lazy-load
   p
-    nuxt-link(to='/example/type-safe-vuex')
-      | type-safe-vuex
+    nuxt-link(to='/example/type-safe-vuex') type-safe-vuex
   p
-    nuxt-link(to='/example/extend-css-class')
-      | extend-css-class
+    nuxt-link(to='/example/extend-css-class') extend-css-class
   p
-    nuxt-link(to='/example/dynamic-import')
-      | dynamic-import
+    nuxt-link(to='/example/dynamic-import') dynamic-import
   p
-    nuxt-link(to='/example/user-agent')
-      | user-agent
+    nuxt-link(to='/example/user-agent') user-agent
   p
-    nuxt-link(to='/example/i18n')
-      | i18n
+    nuxt-link(to='/example/i18n') i18n
+  p
+    nuxt-link(to='/example/animejs') animejs
 </template>
 
 <script lang="ts">

yarn.lock

@@ -2040,6 +2040,11 @@
     react-dom "^16.8.1"
     regenerator-runtime "^0.12.1"
 
+"@types/animejs@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@types/animejs/-/animejs-2.0.2.tgz#80ec902fb0dc90778fbcdaf080c03c44ddda979f"
+  integrity sha512-ACymFQ5qgSrZNR1Fqjk7Wv9gH6dFgejn2gpLkkceWxTKzivRJsshX4xhBVALgvF79gUdXiMCRIdusN728XpeGA==
+
 "@types/anymatch@*":
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
@@ -2766,6 +2771,11 @@ amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
 
+animejs@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/animejs/-/animejs-3.0.1.tgz#8b808bad575e3b6106489d8b04b92bc4062166fe"
+  integrity sha512-7mMoBQScvA7s4zm3EVgnuXXrtOu6TJNAhU+Ajo7HsXYH0NwbuZIcRHMO65a9NyUlmAXz4VPxlK5cENNOQbCi8g==
+
 ansi-align@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"