Added Card component and pose animation

package-lock.json

@@ -898,6 +898,22 @@
       "version": "git+https://solidt.eu/git/niels.kooiman/typescript-domain.git#9e28cad48b97907a571a1d4429c877547b978db2",
       "from": "git+https://solidt.eu/git/niels.kooiman/typescript-domain.git"
     },
+    "@popmotion/easing": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@popmotion/easing/-/easing-1.0.2.tgz",
+      "integrity": "sha512-IkdW0TNmRnWTeWI7aGQIVDbKXPWHVEYdGgd5ZR4SH/Ty/61p63jCjrPxX1XrR7IGkl08bjhJROStD7j+RKgoIw=="
+    },
+    "@popmotion/popcorn": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@popmotion/popcorn/-/popcorn-0.4.2.tgz",
+      "integrity": "sha512-wu0tEwK3KUZ9BoqfcqC3DfdfRDws/oHXwZKJMVtuhXSrF/PtqvilsPjAk93nh8M+orAnbe8ZyxQmop9+4oJs2g==",
+      "requires": {
+        "@popmotion/easing": "^1.0.1",
+        "framesync": "^4.0.1",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "^3.1.6"
+      }
+    },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.7.1.tgz",
@@ -968,6 +984,11 @@
         "@types/node": "*"
       }
     },
+    "@types/invariant": {
+      "version": "2.2.30",
+      "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.30.tgz",
+      "integrity": "sha512-98fB+yo7imSD2F7PF7GIpELNgtLNgo5wjivu0W5V4jx+KVVJxo6p/qN4zdzSTBWy4/sN3pPyXwnhRSD28QX+ag=="
+    },
     "@types/jasmine": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-3.4.0.tgz",
@@ -4530,6 +4551,15 @@
         "map-cache": "^0.2.2"
       }
     },
+    "framesync": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-4.0.4.tgz",
+      "integrity": "sha512-mdP0WvVHe0/qA62KG2LFUAOiWLng5GLpscRlwzBxu2VXOp6B8hNs5C5XlFigsMgrfDrr2YbqTsgdWZTc4RXRMQ==",
+      "requires": {
+        "hey-listen": "^1.0.8",
+        "tslib": "^1.10.0"
+      }
+    },
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -5374,6 +5404,11 @@
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
       "dev": true
     },
+    "hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+    },
     "highlight.js": {
       "version": "9.15.9",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.15.9.tgz",
@@ -7822,6 +7857,34 @@
         "find-up": "^2.1.0"
       }
     },
+    "popmotion": {
+      "version": "8.7.0",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-8.7.0.tgz",
+      "integrity": "sha512-RnJMbWN+TEBT0tgG+3WS0O1i9LAq+senXSAcKw+srGviT1c9G+iKUXrp24D2w6Og0mDd61rEfKz3pFrFCdKn5Q==",
+      "requires": {
+        "@popmotion/easing": "^1.0.1",
+        "@popmotion/popcorn": "^0.4.0",
+        "framesync": "^4.0.0",
+        "hey-listen": "^1.0.5",
+        "style-value-types": "^3.1.4",
+        "stylefire": "^4.1.3",
+        "tslib": "^1.9.1"
+      }
+    },
+    "popmotion-pose": {
+      "version": "3.4.8",
+      "resolved": "https://registry.npmjs.org/popmotion-pose/-/popmotion-pose-3.4.8.tgz",
+      "integrity": "sha512-/dkEhDiTYkbLb15dkrU3Okh58KU5I8z3f18V7kciN/cJmSc8ZD8tWgOc8U9yJf3lUHnf/va5PMCX4/4RnVeUiQ==",
+      "requires": {
+        "@popmotion/easing": "^1.0.1",
+        "hey-listen": "^1.0.5",
+        "popmotion": "^8.6.2",
+        "pose-core": "^2.1.0",
+        "style-value-types": "^3.0.6",
+        "ts-essentials": "^1.0.3",
+        "tslib": "^1.9.1"
+      }
+    },
     "portfinder": {
       "version": "1.0.21",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.21.tgz",
@@ -7850,6 +7913,24 @@
         }
       }
     },
+    "pose-core": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pose-core/-/pose-core-2.1.0.tgz",
+      "integrity": "sha512-36mVAnIgbM6jfyRug8EqqFbazHUAk9dxwVRpX61FlVw3amI/j7AFegtVU56N0Dht2aYDJIhgYPUYraT1CzjHDw==",
+      "requires": {
+        "@types/invariant": "^2.2.29",
+        "@types/node": "^10.0.5",
+        "hey-listen": "^1.0.5",
+        "tslib": "^1.9.1"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "10.14.15",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-10.14.15.tgz",
+          "integrity": "sha512-CBR5avlLcu0YCILJiDIXeU2pTw7UK/NIxfC63m7d7CVamho1qDEzXKkOtEauQRPMy6MI8mLozth+JJkas7HY6g=="
+        }
+      }
+    },
     "posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@@ -9842,6 +9923,25 @@
       "integrity": "sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=",
       "dev": true
     },
+    "style-value-types": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-3.1.6.tgz",
+      "integrity": "sha512-AxcfUr/06AHyyyxkNB1O8ypvwa8/qK+sxwelxEN5x+jxW+RXutRE2TuHEQbFq9OBY7ym83CPKvVIsGd6lvKb0Q==",
+      "requires": {
+        "hey-listen": "^1.0.8"
+      }
+    },
+    "stylefire": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/stylefire/-/stylefire-4.1.4.tgz",
+      "integrity": "sha512-bp9nNTTFHdIQp/4szBuF2z85rMAq5oySeAHdpNgPTcVlXDrwsi1FjjOLug/4+yx1p8eMFFGrkAex7b5/M95ivg==",
+      "requires": {
+        "@popmotion/popcorn": "^0.4.0",
+        "framesync": "^4.0.0",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "^3.1.4"
+      }
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -10128,6 +10228,11 @@
       "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==",
       "dev": true
     },
+    "ts-essentials": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/ts-essentials/-/ts-essentials-1.0.4.tgz",
+      "integrity": "sha512-q3N1xS4vZpRouhYHDPwO0bDW3EZ6SK9CrrDHxi/D6BPReSjpVgWIOpLS2o0gSBZm+7q/wyKp6RVM1AeeW7uyfQ=="
+    },
     "ts-loader": {
       "version": "5.4.5",
       "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-5.4.5.tgz",
@@ -10165,8 +10270,7 @@
     "tslib": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
-      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==",
+      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
-      "dev": true
     },
     "tslint": {
       "version": "5.18.0",
@@ -10644,6 +10748,16 @@
         }
       }
     },
+    "vue-pose": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/vue-pose/-/vue-pose-0.5.1.tgz",
+      "integrity": "sha512-hMdg371QaZ2k95AOHcvf3K8rk5qvOPw57hxi6168KDQAmz0v5Q8/7NIh4ZhoA/AXDCC+kiLFxRQZgS02rMdjWQ==",
+      "requires": {
+        "hey-listen": "^1.0.5",
+        "popmotion-pose": "^3.3.0",
+        "tslib": "^1.9.1"
+      }
+    },
     "vue-property-decorator": {
       "version": "8.2.1",
       "resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-8.2.1.tgz",

package.json

@@ -10,13 +10,14 @@
     "test": "jasmine-ts --config=jasmine.json --project tsconfig.spec.json"
   },
   "dependencies": {
+    "@nx/typescript-domain": "git+https://solidt.eu/git/niels.kooiman/typescript-domain.git",
     "core-js": "^2.6.5",
     "register-service-worker": "^1.6.2",
     "vue": "^2.6.10",
     "vue-class-component": "^7.0.2",
+    "vue-pose": "^0.5.1",
     "vue-property-decorator": "^8.1.0",
-    "vue-router": "^3.0.3",
+    "vue-router": "^3.0.3"
-    "@nx/typescript-domain": "git+https://solidt.eu/git/niels.kooiman/typescript-domain.git"
   },
   "devDependencies": {
     "@types/jasmine": "^3.3.9",

src/App.vue

@@ -2,7 +2,8 @@
   <div id="app">
     <div id="nav">
       <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+      <router-link to="/about">About</router-link> |
+      <router-link to="/card">Card</router-link>
     </div>
     <router-view/>
   </div>

src/components/Card.vue

@@ -0,0 +1,63 @@
+<template>
+    <div>
+        <div class="area">
+            <Box class="card" :pose="isVisible ? 'visible' : 'hidden'">
+                ?
+            </Box>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import posed from "vue-pose";
+
+@Component({
+    components: {
+        Box: posed.div({
+            visible: { rotateY: 180, transition: { duration: 300 } },
+            hidden: { rotateY: 0, transition: { duration: 300 } }
+        })
+    }
+})
+export default class CardComponent extends Vue {
+    private isVisible: boolean;
+    public data() {
+        return { isVisible: this.isVisible };
+    }
+    public mounted() {
+        setInterval(() => {
+            this.isVisible = !this.isVisible;
+        }, 1000);
+    }
+}
+</script>
+
+<style scoped lang="less">
+.area {
+  transform-style: preserve-3d;
+  perspective: 500px;
+  width: 100px;
+  height: 100px;
+  margin:0 auto;
+}
+
+.card {
+  width: 100px;
+  height: 100px;
+  background: #14D790;
+  box-shadow: 0 0 5px 0.5px #444;
+  color:#fff;
+  font-size: 90px;
+  text-align: center;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background: #54E365;
+    display: block;
+    margin: 0 auto;
+}
+
+</style>

src/router.ts

@@ -2,6 +2,8 @@ import Vue from "vue";
 import Router from "vue-router";
 import Home from "./views/Home.vue";
 
+import Card from "./views/Card.vue";
+
 Vue.use(Router);
 
 export default new Router({
@@ -19,5 +21,13 @@ export default new Router({
       // which is lazy-loaded when the route is visited.
       component: () => import(/* webpackChunkName: "about" */ "./views/About.vue"),
     },
+    {
+        path: "/card",
+        name: "card",
+        // route level code-splitting
+        // this generates a separate chunk (about.[hash].js) for this route
+        // which is lazy-loaded when the route is visited.
+        component: Card,
+      },
   ],
 });

src/views/Card.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="card">
+    <Card/>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import Card from "@/components/Card.vue"; // @ is an alias to /src
+
+@Component({
+  components: {
+    Card,
+  },
+})
+export default class Home extends Vue {}
+</script>