wip

src/web/app/mobile/tags/notify.tag

@@ -1,40 +0,0 @@
-<mk-notify>
-	<mk-notification-preview notification={ opts.notification }/>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			position fixed
-			z-index 1024
-			bottom -64px
-			left 0
-			width 100%
-			height 64px
-			pointer-events none
-			-webkit-backdrop-filter blur(2px)
-			backdrop-filter blur(2px)
-			background-color rgba(#000, 0.5)
-
-	</style>
-	<script lang="typescript">
-		import * as anime from 'animejs';
-
-		this.on('mount', () => {
-			anime({
-				targets: this.root,
-				bottom: '0px',
-				duration: 500,
-				easing: 'easeOutQuad'
-			});
-
-			setTimeout(() => {
-				anime({
-					targets: this.root,
-					bottom: '-64px',
-					duration: 500,
-					easing: 'easeOutQuad',
-					complete: () => this.$destroy()
-				});
-			}, 6000);
-		});
-	</script>
-</mk-notify>

src/web/app/mobile/views/components/notify.vue

@@ -0,0 +1,49 @@
+<template>
+<div class="mk-notify">
+	<mk-notification-preview :notification="notification"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as anime from 'animejs';
+
+export default Vue.extend({
+	props: ['notification'],
+	mounted() {
+		Vue.nextTick(() => {
+			anime({
+				targets: this.$el,
+				bottom: '0px',
+				duration: 500,
+				easing: 'easeOutQuad'
+			});
+
+			setTimeout(() => {
+				anime({
+					targets: this.$el,
+					bottom: '-64px',
+					duration: 500,
+					easing: 'easeOutQuad',
+					complete: () => this.$destroy()
+				});
+			}, 6000);
+		});
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-notify
+	position fixed
+	z-index 1024
+	bottom -64px
+	left 0
+	width 100%
+	height 64px
+	pointer-events none
+	-webkit-backdrop-filter blur(2px)
+	backdrop-filter blur(2px)
+	background-color rgba(#000, 0.5)
+
+</style>