<template>
  <div id="app">
    <h1>{{ message }}</h1>

    <p>
      read the blog post over at
      <a
        href="https://dev.to/james_foran/vue-transition-group-strange-entry-behaviour-1agi"
        target="_blank"
        rel="noopener"
      >
        dev.to
      </a>
      .
    </p>

    <button @click="trigger">Pull the trigger</button>

    <div v-if="!fix">
      <transition-group class="container" name="smoothFlex" as="div">
        <div class="circle" key="c1"></div>
        <div v-show="showSecond" class="circle" key="c2"></div>
      </transition-group>
    </div>
    <div v-else>
      <transition-group class="container" name="smoothFlex" as="div">
        <div class="circle blue" key="c1"></div>
        <div v-if="showSecond" class="circle blue" key="c2"></div>
      </transition-group>
    </div>
    <button @click="fixMe">{{ fix ? "break me" : "fix me" }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Group Transition: Strange entry demo",
      showSecond: false,
      fix: false
    };
  },
  methods: {
    trigger() {
      this.showSecond = !this.showSecond;
    },
    fixMe() {
      this.fix = !this.fix;
    }
  }
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

a,
button {
  color: #4fc08d;
}

button {
  background: none;
  border: solid 1px;
  border-radius: 2em;
  font: inherit;
  padding: 0.75em 2em;
}

.container {
  display: flex;
  justify-content: space-around;
  margin: 3rem;
}

.circle {
  background: red;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  transition: all 1s;
  display: inline-block;
}

.circle.blue {
  background: blue;
}

.smoothFlex-item {
  transition: all 1s;
  display: inline-block;
}

.smoothFlex-enter-active,
.smoothFlex-leave-active {
  transition: all 1s;
}

.smoothFlex-leave-active {
  position: absolute;
}

.smoothFlex-enter,
.smoothFlex-leave-to {
  transform: translateX(100px);
  opacity: 0;
}
</style>