#299 Use Anime instead of Velocity

2 files changed, 46 insertions, 7 deletions

diff --git a/src/web/app/common/tags/reaction-picker.tag b/src/web/app/common/tags/reaction-picker.tag
index 194c9d7b4a..688ccc32a3 100644
--- a/src/web/app/common/tags/reaction-picker.tag
+++ b/src/web/app/common/tags/reaction-picker.tag
@@ -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>
diff --git a/src/web/app/common/tags/stream-indicator.tag b/src/web/app/common/tags/stream-indicator.tag
index 0a48459d87..96d9b0ec95 100644
--- a/src/web/app/common/tags/stream-indicator.tag
+++ b/src/web/app/common/tags/stream-indicator.tag
@@ -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>