niels.kooiman/brain-cards
0
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Added Card component and pose animation

Browse Source
This commit is contained in:
Niels Kooiman
2019-08-14 11:19:24 +02:00
parent 1b6fa67294
commit e3c1a67d2e
6 changed files with 211 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
package-lock.json generated
View File

@@ -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==",
"dev": true
"integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
},
"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",

5
package.json
View File

@@ -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",
"@nx/typescript-domain": "git+https://solidt.eu/git/niels.kooiman/typescript-domain.git"
"vue-router": "^3.0.3"
},
"devDependencies": {
"@types/jasmine": "^3.3.9",

3
src/App.vue
View File

@@ -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>

63
src/components/Card.vue Normal file
View File

@@ -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>

10
src/router.ts
View File

@@ -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,
},
],
});

17
src/views/Card.vue Normal file
View File

@@ -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>