forked from FoundKeyGang/FoundKey
#299 Use Anime instead of Velocity
This commit is contained in:
parent
5869aab255
commit
9996603e15
12 changed files with 139 additions and 107 deletions
|
@ -64,6 +64,7 @@
|
||||||
"@types/webpack": "2.2.11",
|
"@types/webpack": "2.2.11",
|
||||||
"@types/webpack-stream": "3.2.6",
|
"@types/webpack-stream": "3.2.6",
|
||||||
"@types/websocket": "0.0.33",
|
"@types/websocket": "0.0.33",
|
||||||
|
"animejs": "2.0.1",
|
||||||
"autwh": "0.0.1",
|
"autwh": "0.0.1",
|
||||||
"bcryptjs": "2.4.3",
|
"bcryptjs": "2.4.3",
|
||||||
"body-parser": "1.17.1",
|
"body-parser": "1.17.1",
|
||||||
|
@ -141,7 +142,6 @@
|
||||||
"typescript": "2.2.1",
|
"typescript": "2.2.1",
|
||||||
"uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#8f4b45f4f814c04918382949b4bcaf7a8d910281",
|
"uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#8f4b45f4f814c04918382949b4bcaf7a8d910281",
|
||||||
"uuid": "3.0.1",
|
"uuid": "3.0.1",
|
||||||
"velocity-animate": "1.4.3",
|
|
||||||
"vhost": "3.0.2",
|
"vhost": "3.0.2",
|
||||||
"webpack": "2.2.1",
|
"webpack": "2.2.1",
|
||||||
"webpack-stream": "3.2.0",
|
"webpack-stream": "3.2.0",
|
||||||
|
|
|
@ -3,7 +3,6 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import * as riot from 'riot';
|
import * as riot from 'riot';
|
||||||
require('velocity-animate');
|
|
||||||
import api from './common/scripts/api';
|
import api from './common/scripts/api';
|
||||||
import signout from './common/scripts/signout';
|
import signout from './common/scripts/signout';
|
||||||
import checkForUpdate from './common/scripts/check-for-update';
|
import checkForUpdate from './common/scripts/check-for-update';
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<mk-reaction-picker>
|
<mk-reaction-picker>
|
||||||
<div class="backdrop" onclick={ unmount }></div>
|
<div class="backdrop" ref="backdrop" onclick={ close }></div>
|
||||||
<div class="popover" ref="popover">
|
<div class="popover" ref="popover">
|
||||||
<button onclick={ react.bind(null, 'like') } tabindex="1" title="いいね"><mk-reaction-icon reaction='like'></mk-reaction-icon></button>
|
<button onclick={ react.bind(null, 'like') } tabindex="1" title="いいね"><mk-reaction-icon reaction='like'></mk-reaction-icon></button>
|
||||||
<button onclick={ react.bind(null, 'love') } tabindex="2" title="ハート"><mk-reaction-icon reaction='love'></mk-reaction-icon></button>
|
<button onclick={ react.bind(null, 'love') } tabindex="2" title="ハート"><mk-reaction-icon reaction='love'></mk-reaction-icon></button>
|
||||||
|
@ -30,6 +30,8 @@
|
||||||
border 1px solid rgba(27, 31, 35, 0.15)
|
border 1px solid rgba(27, 31, 35, 0.15)
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
|
box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
|
||||||
|
transform scale(0.5)
|
||||||
|
opacity 0
|
||||||
|
|
||||||
> button
|
> button
|
||||||
width 40px
|
width 40px
|
||||||
|
@ -46,6 +48,8 @@
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
|
import anime from 'animejs';
|
||||||
|
|
||||||
this.mixin('api');
|
this.mixin('api');
|
||||||
|
|
||||||
this.post = this.opts.post;
|
this.post = this.opts.post;
|
||||||
|
@ -60,6 +64,13 @@
|
||||||
const height = this.refs.popover.offsetHeight;
|
const height = this.refs.popover.offsetHeight;
|
||||||
this.refs.popover.style.left = (x - (width / 2)) + 'px';
|
this.refs.popover.style.left = (x - (width / 2)) + 'px';
|
||||||
this.refs.popover.style.top = (y - (height / 2)) + 'px';
|
this.refs.popover.style.top = (y - (height / 2)) + 'px';
|
||||||
|
|
||||||
|
anime({
|
||||||
|
targets: this.refs.popover,
|
||||||
|
opacity: [0, 1],
|
||||||
|
scale: [0.5, 1],
|
||||||
|
duration: 500
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
this.react = reaction => {
|
this.react = reaction => {
|
||||||
|
@ -71,5 +82,25 @@
|
||||||
this.unmount();
|
this.unmount();
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
this.close = () => {
|
||||||
|
this.refs.backdrop.style.pointerEvents = 'none';
|
||||||
|
anime({
|
||||||
|
targets: this.refs.backdrop,
|
||||||
|
opacity: 0,
|
||||||
|
duration: 200,
|
||||||
|
easing: 'linear'
|
||||||
|
});
|
||||||
|
|
||||||
|
this.refs.popover.style.pointerEvents = 'none';
|
||||||
|
anime({
|
||||||
|
targets: this.refs.popover,
|
||||||
|
opacity: 0,
|
||||||
|
scale: 0.5,
|
||||||
|
duration: 200,
|
||||||
|
easing: 'easeInBack',
|
||||||
|
complete: this.unmount
|
||||||
|
});
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
</mk-reaction-picker>
|
</mk-reaction-picker>
|
||||||
|
|
|
@ -35,6 +35,8 @@
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
|
import anime from 'animejs';
|
||||||
|
|
||||||
this.mixin('i');
|
this.mixin('i');
|
||||||
this.mixin('stream');
|
this.mixin('stream');
|
||||||
|
|
||||||
|
@ -47,17 +49,23 @@
|
||||||
this.stream.on('_connected_', () => {
|
this.stream.on('_connected_', () => {
|
||||||
this.update();
|
this.update();
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
Velocity(this.root, {
|
anime({
|
||||||
opacity: 0
|
targets: this.root,
|
||||||
}, 200, 'linear');
|
opacity: 0,
|
||||||
|
easing: 'linear',
|
||||||
|
duration: 200
|
||||||
|
});
|
||||||
}, 1000);
|
}, 1000);
|
||||||
});
|
});
|
||||||
|
|
||||||
this.stream.on('_closed_', () => {
|
this.stream.on('_closed_', () => {
|
||||||
this.update();
|
this.update();
|
||||||
Velocity(this.root, {
|
anime({
|
||||||
opacity: 1
|
targets: this.root,
|
||||||
}, 0);
|
opacity: 1,
|
||||||
|
easing: 'linear',
|
||||||
|
duration: 50
|
||||||
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</mk-stream-indicator>
|
</mk-stream-indicator>
|
||||||
|
|
|
@ -16,6 +16,7 @@
|
||||||
background #fff
|
background #fff
|
||||||
border-radius 0 4px 4px 4px
|
border-radius 0 4px 4px 4px
|
||||||
box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
|
box-shadow 2px 2px 8px rgba(0, 0, 0, 0.2)
|
||||||
|
opacity 0
|
||||||
|
|
||||||
ul
|
ul
|
||||||
display block
|
display block
|
||||||
|
@ -95,6 +96,7 @@
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
|
import anime from 'animejs';
|
||||||
import contains from '../../common/scripts/contains';
|
import contains from '../../common/scripts/contains';
|
||||||
|
|
||||||
this.root.addEventListener('contextmenu', e => {
|
this.root.addEventListener('contextmenu', e => {
|
||||||
|
@ -116,12 +118,9 @@
|
||||||
this.root.style.left = pos.x + 'px';
|
this.root.style.left = pos.x + 'px';
|
||||||
this.root.style.top = pos.y + 'px';
|
this.root.style.top = pos.y + 'px';
|
||||||
|
|
||||||
Velocity(this.root, 'finish', true);
|
anime({
|
||||||
Velocity(this.root, { opacity: 0 }, 0);
|
targets: this.root,
|
||||||
Velocity(this.root, {
|
opacity: [0, 1],
|
||||||
opacity: 1
|
|
||||||
}, {
|
|
||||||
queue: false,
|
|
||||||
duration: 100,
|
duration: 100,
|
||||||
easing: 'linear'
|
easing: 'linear'
|
||||||
});
|
});
|
||||||
|
|
|
@ -36,6 +36,7 @@
|
||||||
padding 32px 42px
|
padding 32px 42px
|
||||||
width 480px
|
width 480px
|
||||||
background #fff
|
background #fff
|
||||||
|
opacity 0
|
||||||
|
|
||||||
> header
|
> header
|
||||||
margin 1em 0
|
margin 1em 0
|
||||||
|
@ -79,6 +80,8 @@
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
|
import anime from 'animejs';
|
||||||
|
|
||||||
this.canThrough = opts.canThrough != null ? opts.canThrough : true;
|
this.canThrough = opts.canThrough != null ? opts.canThrough : true;
|
||||||
this.opts.buttons.forEach(button => {
|
this.opts.buttons.forEach(button => {
|
||||||
button._onclick = () => {
|
button._onclick = () => {
|
||||||
|
@ -92,25 +95,17 @@
|
||||||
this.refs.body.innerHTML = this.opts.text;
|
this.refs.body.innerHTML = this.opts.text;
|
||||||
|
|
||||||
this.refs.bg.style.pointerEvents = 'auto';
|
this.refs.bg.style.pointerEvents = 'auto';
|
||||||
Velocity(this.refs.bg, 'finish', true);
|
anime({
|
||||||
Velocity(this.refs.bg, {
|
targets: this.refs.bg,
|
||||||
opacity: 1
|
opacity: 1,
|
||||||
}, {
|
|
||||||
queue: false,
|
|
||||||
duration: 100,
|
duration: 100,
|
||||||
easing: 'linear'
|
easing: 'linear'
|
||||||
});
|
});
|
||||||
|
|
||||||
Velocity(this.refs.main, {
|
anime({
|
||||||
opacity: 0,
|
targets: this.refs.main,
|
||||||
scale: 1.2
|
|
||||||
}, {
|
|
||||||
duration: 0
|
|
||||||
});
|
|
||||||
Velocity(this.refs.main, {
|
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
scale: 1
|
scale: [1.2, 1],
|
||||||
}, {
|
|
||||||
duration: 300,
|
duration: 300,
|
||||||
easing: [ 0, 0.5, 0.5, 1 ]
|
easing: [ 0, 0.5, 0.5, 1 ]
|
||||||
});
|
});
|
||||||
|
@ -118,25 +113,21 @@
|
||||||
|
|
||||||
this.close = () => {
|
this.close = () => {
|
||||||
this.refs.bg.style.pointerEvents = 'none';
|
this.refs.bg.style.pointerEvents = 'none';
|
||||||
Velocity(this.refs.bg, 'finish', true);
|
anime({
|
||||||
Velocity(this.refs.bg, {
|
targets: this.refs.bg,
|
||||||
opacity: 0
|
opacity: 0,
|
||||||
}, {
|
|
||||||
queue: false,
|
|
||||||
duration: 300,
|
duration: 300,
|
||||||
easing: 'linear'
|
easing: 'linear'
|
||||||
});
|
});
|
||||||
|
|
||||||
this.refs.main.style.pointerEvents = 'none';
|
this.refs.main.style.pointerEvents = 'none';
|
||||||
Velocity(this.refs.main, 'finish', true);
|
anime({
|
||||||
Velocity(this.refs.main, {
|
targets: this.refs.main,
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
scale: 0.8
|
scale: 0.8,
|
||||||
}, {
|
|
||||||
queue: false,
|
|
||||||
duration: 300,
|
duration: 300,
|
||||||
easing: [ 0.5, -0.5, 1, 0.5 ],
|
easing: [ 0.5, -0.5, 1, 0.5 ],
|
||||||
complete: () => this.unmount()
|
complete: this.unmount
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -29,6 +29,8 @@
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
|
import anime from 'animejs';
|
||||||
|
|
||||||
this.tips = [
|
this.tips = [
|
||||||
'<kbd>t</kbd>でタイムラインにフォーカスできます',
|
'<kbd>t</kbd>でタイムラインにフォーカスできます',
|
||||||
'<kbd>p</kbd>または<kbd>n</kbd>で投稿フォームを開きます',
|
'<kbd>p</kbd>または<kbd>n</kbd>で投稿フォームを開きます',
|
||||||
|
@ -55,20 +57,22 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
this.change = () => {
|
this.change = () => {
|
||||||
Velocity(this.refs.tip, {
|
anime({
|
||||||
opacity: 0
|
targets: this.refs.tip,
|
||||||
}, {
|
opacity: 0,
|
||||||
duration: 500,
|
duration: 500,
|
||||||
easing: 'linear',
|
easing: 'linear',
|
||||||
complete: this.set
|
complete: this.set
|
||||||
});
|
});
|
||||||
|
|
||||||
Velocity(this.refs.tip, {
|
setTimeout(() => {
|
||||||
opacity: 1
|
anime({
|
||||||
}, {
|
targets: this.refs.tip,
|
||||||
|
opacity: 1,
|
||||||
duration: 500,
|
duration: 500,
|
||||||
easing: 'linear'
|
easing: 'linear'
|
||||||
});
|
});
|
||||||
|
}, 500);
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
</mk-tips-home-widget>
|
</mk-tips-home-widget>
|
||||||
|
|
|
@ -35,26 +35,27 @@
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
|
import anime from 'animejs';
|
||||||
|
|
||||||
this.image = this.opts.image;
|
this.image = this.opts.image;
|
||||||
|
|
||||||
this.on('mount', () => {
|
this.on('mount', () => {
|
||||||
Velocity(this.root, {
|
anime({
|
||||||
opacity: 1
|
targets: this.root,
|
||||||
}, {
|
opacity: 1,
|
||||||
duration: 100,
|
duration: 100,
|
||||||
easing: 'linear'
|
easing: 'linear'
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
this.close = () => {
|
this.close = () => {
|
||||||
Velocity(this.root, {
|
anime({
|
||||||
opacity: 0
|
targets: this.root,
|
||||||
}, {
|
opacity: 0,
|
||||||
duration: 100,
|
duration: 100,
|
||||||
easing: 'linear',
|
easing: 'linear',
|
||||||
complete: () => this.unmount()
|
complete: this.unmount
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</mk-image-dialog>
|
</mk-image-dialog>
|
||||||
|
|
|
@ -22,21 +22,23 @@
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
|
import anime from 'animejs';
|
||||||
|
|
||||||
this.on('mount', () => {
|
this.on('mount', () => {
|
||||||
Velocity(this.root, {
|
anime({
|
||||||
top: '0px'
|
tagrets: this.root,
|
||||||
}, {
|
top: '0px',
|
||||||
duration: 500,
|
duration: 500,
|
||||||
easing: 'ease-out'
|
easing: 'easeOutQuad'
|
||||||
})
|
})
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
Velocity(this.root, {
|
anime({
|
||||||
top: '-64px'
|
targets: this.root,
|
||||||
}, {
|
top: '-64px',
|
||||||
duration: 500,
|
duration: 500,
|
||||||
easing: 'ease-out',
|
easing: 'easeOutQuad',
|
||||||
complete: () => this.unmount()
|
complete: this.unmount
|
||||||
});
|
});
|
||||||
}, 6000);
|
}, 6000);
|
||||||
});
|
});
|
||||||
|
|
|
@ -99,6 +99,8 @@
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
|
import anime from 'animejs';
|
||||||
|
|
||||||
this.mixin('i');
|
this.mixin('i');
|
||||||
this.mixin('api');
|
this.mixin('api');
|
||||||
|
|
||||||
|
@ -124,23 +126,23 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
this.open = () => {
|
this.open = () => {
|
||||||
Velocity(this.root, {
|
anime({
|
||||||
|
targets: this.root,
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
'margin-top': 0
|
'margin-top': 0,
|
||||||
}, {
|
|
||||||
duration: 200,
|
duration: 200,
|
||||||
easing: 'ease-out'
|
easing: 'easeOutQuad'
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
this.close = () => {
|
this.close = () => {
|
||||||
Velocity(this.root, {
|
anime({
|
||||||
|
targets: this.root,
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
'margin-top': '-8px'
|
'margin-top': '-8px',
|
||||||
}, {
|
|
||||||
duration: 200,
|
duration: 200,
|
||||||
easing: 'ease-out',
|
easing: 'easeOutQuad',
|
||||||
complete: () => this.unmount()
|
complete: this.unmount
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -173,6 +173,7 @@
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
|
import anime from 'animejs';
|
||||||
import contains from '../../common/scripts/contains';
|
import contains from '../../common/scripts/contains';
|
||||||
|
|
||||||
this.minHeight = 40;
|
this.minHeight = 40;
|
||||||
|
@ -222,26 +223,21 @@
|
||||||
|
|
||||||
if (this.isModal) {
|
if (this.isModal) {
|
||||||
this.refs.bg.style.pointerEvents = 'auto';
|
this.refs.bg.style.pointerEvents = 'auto';
|
||||||
Velocity(this.refs.bg, 'finish', true);
|
anime({
|
||||||
Velocity(this.refs.bg, {
|
targets: this.refs.bg,
|
||||||
opacity: 1
|
opacity: 1,
|
||||||
}, {
|
|
||||||
queue: false,
|
|
||||||
duration: 100,
|
duration: 100,
|
||||||
easing: 'linear'
|
easing: 'linear'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
this.refs.main.style.pointerEvents = 'auto';
|
this.refs.main.style.pointerEvents = 'auto';
|
||||||
Velocity(this.refs.main, 'finish', true);
|
anime({
|
||||||
Velocity(this.refs.main, { scale: 1.1 }, 0);
|
targets: this.refs.main,
|
||||||
Velocity(this.refs.main, {
|
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
scale: 1
|
scale: [1.1, 1],
|
||||||
}, {
|
|
||||||
queue: false,
|
|
||||||
duration: 200,
|
duration: 200,
|
||||||
easing: 'ease-out'
|
easing: 'easeOutQuad'
|
||||||
});
|
});
|
||||||
|
|
||||||
//this.refs.main.focus();
|
//this.refs.main.focus();
|
||||||
|
@ -256,25 +252,22 @@
|
||||||
|
|
||||||
if (this.isModal) {
|
if (this.isModal) {
|
||||||
this.refs.bg.style.pointerEvents = 'none';
|
this.refs.bg.style.pointerEvents = 'none';
|
||||||
Velocity(this.refs.bg, 'finish', true);
|
anime({
|
||||||
Velocity(this.refs.bg, {
|
targets: this.refs.bg,
|
||||||
opacity: 0
|
opacity: 0,
|
||||||
}, {
|
|
||||||
queue: false,
|
|
||||||
duration: 300,
|
duration: 300,
|
||||||
easing: 'linear'
|
easing: 'linear'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
this.refs.main.style.pointerEvents = 'none';
|
this.refs.main.style.pointerEvents = 'none';
|
||||||
Velocity(this.refs.main, 'finish', true);
|
|
||||||
Velocity(this.refs.main, {
|
anime({
|
||||||
|
targets: this.refs.main,
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
scale: 0.8
|
scale: 0.8,
|
||||||
}, {
|
|
||||||
queue: false,
|
|
||||||
duration: 300,
|
duration: 300,
|
||||||
easing: [ 0.5, -0.5, 1, 0.5 ]
|
easing: [0.5, -0.5, 1, 0.5]
|
||||||
});
|
});
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
|
|
@ -16,20 +16,22 @@
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
|
import anime from 'animejs';
|
||||||
|
|
||||||
this.on('mount', () => {
|
this.on('mount', () => {
|
||||||
Velocity(this.root, {
|
anime({
|
||||||
bottom: '0px'
|
targets: this.root,
|
||||||
}, {
|
bottom: '0px',
|
||||||
duration: 500,
|
duration: 500,
|
||||||
easing: 'ease-out'
|
easing: 'easeOutQuad'
|
||||||
});
|
});
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
Velocity(this.root, {
|
anime({
|
||||||
bottom: '-64px'
|
targets: this.root,
|
||||||
}, {
|
bottom: '-64px',
|
||||||
duration: 500,
|
duration: 500,
|
||||||
easing: 'ease-out',
|
easing: 'easeOutQuad',
|
||||||
complete: () => this.unmount()
|
complete: () => this.unmount()
|
||||||
});
|
});
|
||||||
}, 6000);
|
}, 6000);
|
||||||
|
|
Loading…
Reference in a new issue