has fade of icon

ExpanderIcon.vue

<template>
<span class="parent">
  <transition name="component-fade" mode="out-in">
    <i v-if="!expanded" class="fa fa-chevron-right" aria-hidden="true" :key="1"></i>
    <i v-else class="fa fa-chevron-right fa-rotate-90" aria-hidden="true" :key="2"></i>
  </transition>
  </span>
</template>

<script>
export default {
  name: "ExpanderIcon",
  props: {
    expanded: Boolean
  }
};
</script>


<style scoped>


.component-fade-enter-active, .component-fade-leave-active {
  transition: transform .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active below version 2.1.8 */ {
    transform: rotate(90deg);
}

.parent:hover
{
  box-shadow: 0 0 4px #111111;
  /* Soften the jagged edge */
}


</style>

TreeWithTransitions.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    Tree-Vue
    <div class="container">
      
      <div v-for="(schema,i) in $store.state.schemas" >
      
        <div class="row">
          <div class="col-md-12 offset-md-0">
            <ExpanderIcon
              @click.native="clickedNodeExpander(schema, null, null)"
              v-bind:expanded="schema.treeProps.expanded"
            ></ExpanderIcon>
            <TreeSelectCheckbox v-bind:checkState="schema.treeProps.checkState"></TreeSelectCheckbox>
            {{schema.schemaName}} - {{schema.treeProps.expanded}}
          </div>
        </div>

        <transition-group name="list" tag="div" >  
        <div v-show="schema.treeProps.expanded" v-for="(table, index) in schema.tables" :key="index">

          <div class="row">
            {{index}}
            <div class="col-md-11 offset-md-1">
              <ExpanderIcon @click.native="clickedNodeExpander(schema, table, null)" v-bind:expanded="table.treeProps.expanded"></ExpanderIcon>
              <TreeSelectCheckbox v-bind:checkState="table.treeProps.checkState"></TreeSelectCheckbox>
              {{table.tableName}} - {{table.treeProps.expanded}}
            </div>
          </div>
       <transition-group name="list" tag="div" >  
          <div v-show="table.treeProps.expanded" class="row" v-for="(column, cindex) in table.columns" :key="cindex">
            <div class="col-md-10 offset-md-2">
              <TreeSelectCheckbox v-bind:checkState="column.treeProps.checkState"></TreeSelectCheckbox>
              {{column.columnName}}
            </div>
          </div>
                </transition-group>
        </div>
         </transition-group>
      
      </div>
      
    </div>
  </div>
</template>

<script>
import ExpanderIcon from "../components/ExpanderIcon";
import TreeSelectCheckbox from "../components/TreeSelectCheckbox";

export default {
  name: "home",
  components: { ExpanderIcon, TreeSelectCheckbox },
  computed: {
    getNodeStatus: node => node.status
  },
  methods: {
    clickedNodeExpander(schema, table, column) {
      this.$store.dispatch("clickedNodeExpander", {
        schema: schema,
        table: table,
        column: column
      });
    }
  }
};
</script>
<style scoped>

.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active, .list-leave-active {
  transition: all .75s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px); 
}
</style>