Attempt at making animations - needs debugging and fixing

Author: Zomis

src/assets/style.css

@@ -324,3 +324,24 @@ th {
 .list-complete-leave-active {
   position: absolute;
 }
+
+
+
+
+.diff-once-enter-active {
+  transition: all 10s;
+  position: absolute;
+}
+
+.pos-absolute {
+  position: absolute;
+}
+
+.diff-once-enter {
+  opacity: 1;
+}
+
+.diff-once-enter-to {
+  opacity: 0;
+  transform: translateY(-300px);
+}

src/components/CardModel.vue

@@ -31,10 +31,11 @@
             <!-- mana cost -->
             <div style="float: left; padding-left: 5px;">
                 <Value :value="card.properties.MANA_COST" type="mana-cost" orElse="0" alwaysShow></Value>
+                <button @click="testChange()">test</button>
             </div>
             <div style="float: right; padding-right: 5px;" class="btn-group">
-                <Value :value="card.properties.ATTACK" type="attack" alwaysShow></Value>
-                <Value :value="card.properties.HEALTH" type="health" alwaysShow></Value>
+                <Value :click="[card.properties, 'ATTACK', 10]" :value="card.properties.ATTACK" type="attack" alwaysShow></Value>
+                <Value :click="[card.properties, 'ATTACK', -10]" :value="card.properties.HEALTH" type="health" alwaysShow></Value>
             </div>
         </div>
         <div style="clear: both;">
@@ -88,6 +89,14 @@ export default {
       Value
     },
     methods: {
+      testChange() {
+        this.card.properties.MANA_COST = this.card.properties.MANA_COST + 10;
+      },
+
+      changeProp(map, prop, diff) {
+        console.log("change map " + prop + " by " + diff);
+        map[prop] += diff;
+      },
         /**
          * Resolves fetching an image file from the file system.
          *

src/components/Value.vue

@@ -3,6 +3,12 @@
     <button class="btn btn-sm active fa" :class="`btn-${buttonStyle} fa-${faValue}`" style="cursor:default" :title="title">
       {{value || orElse}}
     </button>
+    <transition-group name="diff-once" class="pos-absolute" tag="div" @after-enter="removeDiff()">
+      <button v-for="(diff, index) in diffs" :key="index"
+        class="btn btn-sm active fa diff-once" :class="`btn-${buttonStyle} fa-${faValue}`" style="cursor:default">
+        {{diff}}
+      </button>
+    </transition-group>
   </div>
 </template>
 <script>
@@ -43,10 +49,25 @@ export default {
     }
 
     return {
+      diffs: [],
       buttonStyle: style.buttonStyle,
       faValue: style.fa,
       title: style.title
     };
+  },
+  methods: {
+    removeDiff() {
+      console.log("remove first diff");
+      this.diffs.splice(0, 1);
+    }
+  },
+  watch: {
+    value: function(newValue, oldValue) {
+      console.log("change value from " + oldValue + " to " + newValue);
+      let diff = newValue - oldValue;
+      this.diffs.push(diff);
+//      TweenLite.to(this.$data, 0.5, { tweenedNumber: newValue });
+    }
   }
 }