added dialog window for notifications about off animations

luckydiamond/src/assets/css/ComponentsStyles/notification.css

@@ -0,0 +1,24 @@
+.notification {
+    position: absolute;
+    top: 0%;
+    left: 34%;
+    background: #000;
+    width: 20%;
+    height: 5%;
+    z-index: 1000;
+}
+
+.notification__content  {
+    margin-top: 10px;
+    display: flex;
+    justify-content: center;
+}
+
+.fade-enter-active, .fade-leave-active {
+    opacity: 0;
+    transform: translateY(20px);
+}
+.fade-enter, .fade-leave-to {
+    opacity: 1;
+    transform: translateY(100px);
+}

luckydiamond/src/components/AsidebarComponent.vue

@@ -17,14 +17,17 @@
       </div>
     </div>
   </aside>
+  <notiicationwindow-component :isAnimationOn = "AnimationOff"></notiicationwindow-component>
 </template>
 
 
 <script>
+import NotiicationwindowComponent from "@/components/NotiicationwindowComponent.vue";
 import '@/assets/css/ComponentsStyles/asidebar.css'
 
 export default {
   name: 'AsideBar-Element',
+  components: { NotiicationwindowComponent },
   data() {
     return {
       AnimationOff: false

luckydiamond/src/components/NotiicationwindowComponent.vue

@@ -0,0 +1,23 @@
+<template>
+  <transition name="fade">
+    <div class="notification" v-if="isAnimationOn">
+      <div class="notification__content">
+        <h3>Анимации выключены</h3>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import '@/assets/css/ComponentsStyles/notification.css'
+
+export default {
+  props: {
+    isAnimationOn: Boolean
+  }
+}
+</script>
+
+<style>
+
+</style>