smooth-reflow doesn't work well with transition on browser other than…

… Chrome (vuejs/vue#8698, guanzo/vue-smooth-reflow#3)

client/public/index.html

@@ -346,7 +346,7 @@
 			</div>
 
 			<!-- Draft Controls -->
-			<template v-if="drafting">
+			<smooth-reflow v-if="drafting" :options="{transitionEvent: { selector: 'div', property: 'opacity' }}">
 				<transition :name="'slide-fade-'+((boosterNumber % 2)?'left':'right')" mode="out-in">
 					<div v-if="draftingState == DraftState.Watching" key="draft-watching" class="draft-watching">
 						<div class="draft-watching-state">
@@ -423,7 +423,12 @@ <h2>Winston Draft</h2>
 						</span>
 					</div>
 					<div class="winston-piles">
-						<div v-for="(pile, index) in winstonDraftState.piles" class="winston-pile" :class="{'winston-current-pile': index === winstonDraftState.currentPile}">
+						<div
+							v-for="(pile, index) in winstonDraftState.piles"
+							:key="`winston-pile-${index}`"
+							class="winston-pile"
+							:class="{'winston-current-pile': index === winstonDraftState.currentPile}"
+						>
 							<template v-if="userID === winstonDraftState.currentPlayer && index === winstonDraftState.currentPile">
 								<div class="card-column winstom-card-column">
 									<card v-for="card in pile" :key="card.uniqueID" :card="card" :language="language"></card>
@@ -438,7 +443,7 @@ <h2>Winston Draft</h2>
 							</template>
 							<template v-else>
 								<div class="card-column winstom-card-column">
-									<div v-for="card in pile" class="card"><card-placeholder></card-placeholder></div>
+									<div v-for="card in pile" :key="card.uniqueID" class="card"><card-placeholder></card-placeholder></div>
 								</div>
 								<div class="winston-pile-status" v-show="index === winstonDraftState.currentPile">
 									{{userByID[winstonDraftState.currentPlayer].userName}} is looking at this pile...
@@ -447,7 +452,7 @@ <h2>Winston Draft</h2>
 						</div>
 					</div>
 				</div>
-			</template>
+			</smooth-reflow>
 
 			<!-- Brewing controls (Deck & Sideboard) -->
 			<div class="container" v-show="(deck !== undefined && deck.length > 0) || (drafting && draftingState !== DraftState.Watching) || draftingState == DraftState.Brewing">

client/src/components/SmoothReflow.vue

@@ -0,0 +1,23 @@
+<template>
+	<component :is="tag">
+		<slot />
+	</component>
+</template>
+
+<script>
+import smoothReflow from "vue-smooth-reflow";
+export default {
+	name: "SmoothReflow",
+	mixins: [smoothReflow],
+	props: {
+		tag: {
+			type: String,
+			default: "div",
+		},
+		options: Object,
+	},
+	mounted() {
+		this.$smoothReflow(this.options);
+	},
+};
+</script>

client/src/index.js

@@ -6,6 +6,7 @@ import VTooltip from "v-tooltip";
 import VueClazyLoad from "./vue-clazy-load.js";
 import Multiselect from "vue-multiselect";
 import Swal from "sweetalert2";
+import SmoothReflow from "./components/SmoothReflow.vue";
 
 import Constant from "./constants.json";
 import DefaultLoc from "../public/data/MTGACards.en.json";
@@ -68,6 +69,7 @@ var app = new Vue({
 	el: "#main-vue",
 	components: {
 		Modal,
+		SmoothReflow,
 		Toggle,
 		CardPlaceholder,
 		Card,

package.json

@@ -35,6 +35,7 @@
 		"v-tooltip": "^2.0.3",
 		"vue": "^2.6.11",
 		"vue-multiselect": "^2.1.6",
+		"vue-smooth-reflow": "^0.1.12",
 		"vuedraggable": "^2.23.2"
 	},
 	"devDependencies": {