Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

#299 Use Anime instead of Velocity

Browse source
This commit is contained in:
syuilo 2017-03-20 18:43:04 +09:00
parent 5869aab255
commit 9996603e15
12 changed files with 139 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/web/app/desktop/tags/contextmenu.tag
View file

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

43
src/web/app/desktop/tags/dialog.tag
View file

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

22
src/web/app/desktop/tags/home-widgets/tips.tag
View file

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

17
src/web/app/desktop/tags/image-dialog.tag
View file

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

20
src/web/app/desktop/tags/ui-notification.tag
View file

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

20
src/web/app/desktop/tags/user-preview.tag
View file

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

39
src/web/app/desktop/tags/window.tag
View file

@ -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(() => {