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