#299 Use Anime instead of Velocity

7 files changed, 82 insertions, 90 deletions

diff --git a/src/web/app/desktop/tags/contextmenu.tag b/src/web/app/desktop/tags/contextmenu.tag
index 8d53772de7..c862f3f609 100644
--- a/src/web/app/desktop/tags/contextmenu.tag
+++ b/src/web/app/desktop/tags/contextmenu.tag
@@ -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'
 			});
diff --git a/src/web/app/desktop/tags/dialog.tag b/src/web/app/desktop/tags/dialog.tag
index c0df0b330f..8c2603b46d 100644
--- a/src/web/app/desktop/tags/dialog.tag
+++ b/src/web/app/desktop/tags/dialog.tag
@@ -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
 			});
 		};
 
diff --git a/src/web/app/desktop/tags/home-widgets/tips.tag b/src/web/app/desktop/tags/home-widgets/tips.tag
index 27268f3ed3..5a535099ab 100644
--- a/src/web/app/desktop/tags/home-widgets/tips.tag
+++ b/src/web/app/desktop/tags/home-widgets/tips.tag
@@ -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>
diff --git a/src/web/app/desktop/tags/image-dialog.tag b/src/web/app/desktop/tags/image-dialog.tag
index 91245dac95..a2bed46b63 100644
--- a/src/web/app/desktop/tags/image-dialog.tag
+++ b/src/web/app/desktop/tags/image-dialog.tag
@@ -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>
diff --git a/src/web/app/desktop/tags/ui-notification.tag b/src/web/app/desktop/tags/ui-notification.tag
index 34f310844e..ec094edd60 100644
--- a/src/web/app/desktop/tags/ui-notification.tag
+++ b/src/web/app/desktop/tags/ui-notification.tag
@@ -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);
 		});
diff --git a/src/web/app/desktop/tags/user-preview.tag b/src/web/app/desktop/tags/user-preview.tag
index 4285f15ef8..1ed6853e4a 100644
--- a/src/web/app/desktop/tags/user-preview.tag
+++ b/src/web/app/desktop/tags/user-preview.tag
@@ -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>
diff --git a/src/web/app/desktop/tags/window.tag b/src/web/app/desktop/tags/window.tag
index 9e48958a11..aefb6499b7 100644
--- a/src/web/app/desktop/tags/window.tag
+++ b/src/web/app/desktop/tags/window.tag
@@ -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(() => {