animation and timeout

babel.config.js

@@ -14,8 +14,10 @@ module.exports = {
           }
         }]
       ],
-      "plugins": ["@babel/plugin-transform-runtime"]
+      "plugins": ["@babel/plugin-transform-runtime",{
+        "regenerator": true
+      }]
     }
   },
-  "plugins": ["@babel/plugin-syntax-dynamic-import", "transform-dynamic-import"]
+  "plugins": ["@babel/plugin-syntax-dynamic-import", "transform-dynamic-import","@babel/plugin-transform-runtime"]
 }

package.json

@@ -59,7 +59,9 @@
     "parserOptions": {
       "parser": "babel-eslint"
     },
-    "rules": {}
+    "rules": {
+      "no-unused-vars":"off"
+    }
   },
   "browserslist": [
     "> 1%",

src/components/HelloWorld.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Card />
+    <Card :content="content"/>
   </div>
 </template>
 
@@ -11,6 +11,13 @@ export default {
   components: { Card },
   props: {
     msg: String
+  },
+  data(){
+    return{
+      content:{title:"My name is "+this.id,
+               message:"This is my message "
+           }
+    }
   }
 }
 </script>

src/components/Whoosh/Card.vue

@@ -1,19 +1,30 @@
 <template>
+<transition name="slide-fade">
   <div
     class="card"
     :style="{'margin-bottom':setMargin}"
+    @mouseover="paused = true"
+    @mouseleave="paused = false"
   >
     <div class="card__status"></div>
-    Testings
+    <div class="card__title">{{content.title}}</div>
+    <div class="card__message">{{content.message}}</div>
   </div>
+</transition>
 </template>
+
 <script>
+import {TimerCup} from './Util'
 export default {
   props: {
     position: {
       type: Number,
       required: false,
       default: 0
+    },
+    content:{
+      type: Object,
+      required: true
     }
   },
   computed: {
@@ -22,6 +33,41 @@ export default {
       return this.position > 0 ? marg + 'px' : '0px'
     }
   },
+  data(){
+    return{
+      timer:{},
+      paused:false
+    }
+  },
+  mounted(){
+    console.log(this.content)
+    this.close()
+  },
+  watch:{
+    paused(newVal,old){
+      if(newVal){
+        console.log('pausedW')
+        this.timer.pause()
+      }else{
+        console.log('resumeW')
+        this.timer.resume()
+      }
+
+    }
+  },
+  methods:{
+    close(){
+      const vThis = this;
+      this.timer = new TimerCup(function() {
+       console.log(vThis.content)
+        vThis.$emit('close',vThis.content)
+        }, 2000);
+     /*  setTimeout(function() { 
+        console.log(vThis.content)
+        vThis.$emit('close',vThis.content)
+      }, 5000); */
+    }
+  }
 }
 </script>
 
@@ -37,8 +83,8 @@ export default {
 }
 .card__status {
   background-color: green;
-  width: 95%;
-  height: 10px;
+  width: 10px;
+  height: 190px;
   border-radius: 20px;
 }
 </style>

src/components/Whoosh/Util.js

@@ -0,0 +1,22 @@
+export const generateId = (i => () => i++)(0)
+
+
+
+export class TimerCup {
+    constructor(fn, countdown) {
+        let timerId, start, remaining = countdown;
+        this.cancel = function () {
+            window.clearTimeout(timerId);
+        };
+        this.pause = function () {
+            window.clearTimeout(timerId);
+            remaining -= Date.now() - start;
+        };
+        this.resume = function () {
+            start = Date.now();
+            window.clearTimeout(timerId);
+            timerId = window.setTimeout(fn, remaining);
+        };
+        this.resume();
+    }
+}

src/components/Whoosh/Whoosh.vue

@@ -1,23 +1,29 @@
 <template>
   <div>
+    <transition-group name="card">
     <Card
-      v-for="(whooshes,index) in whooshList"
-      :key="index"
+      v-for="(whoosh,index) in whooshList"
+      :content="whoosh"
+      :key="whoosh.id"
       :position="index"
+      @close="removeCard"
     />
+    </transition-group>
   </div>
 </template>
 
 <script>
 import Card from './Card'
 import { events } from './events.js'
+import {generateId} from './Util'
 export default {
   name: 'Whoosh',
   components: { Card },
   data() {
     return {
       show: false,
-      whooshList: []
+      whooshList: [],
+      id:0
     }
   },
   mounted() {
@@ -26,9 +32,42 @@ export default {
   },
   methods: {
     makeAWhooshList(event) {
+      event.id = generateId();
       this.whooshList.push(event)
+    },
+    removeCard(event){
+      console.log(event)
+      this.whooshList = this.whooshList.filter(x => x.id !== event.id)
+      //this.whooshList.splice(event,1)
+    
     }
-
   }
 }
-</script>
+</script>
+
+<style scoped>
+
+
+.card {
+  transition: all 0.5s;
+
+}
+.card-enter, .card-leave-to
+/* .card-leave-active for <2.1.8 */ {
+  opacity: 0;
+  transform: scale(0);
+}
+.card-enter-to {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.card-leave-active {
+  /*position: absolute;*/
+}
+
+.card-move {
+  opacity: 1;
+  transition: all 0.5s;
+}
+</style>