[Vuejs]-How to make icon slide up with expanding panel in a Vue.js transition?

by

0👍

I am no expert but manage to get it to work. Still rough around the edges but I think you can take it from here.

https://jsfiddle.net/eywraw8t/505521/

<div id="app">
  <p>Click the orange icon to toggle the panel.</p>

    <div class="fixed-bottom">

    <div class="button-container">
        <!-- icon -->
    <div    v-show="isIconVisible && !isBottomPanelExpanded"
          class="float-right iconContainer p-1"
          v-on:click="isBottomPanelExpanded = !isBottomPanelExpanded">
      <span class="fa-stack fa-lg" :class="bottomPanelIconCss">
        <i class="fas fa-circle fa-stack-2x"></i>
        <i class="fas fa-arrows-alt-v fa-stack-1x fa-inverse"></i>
      </span>
    </div>

       <transition name="fade">
      <div  v-show="isIconVisible && isBottomPanelExpanded"
            class="float-right iconContainer p-1"
            v-on:click="isBottomPanelExpanded = !isBottomPanelExpanded">
        <span class="fa-stack fa-lg" :class="bottomPanelIconCss">
          <i class="fas fa-circle fa-stack-2x"></i>
          <i class="fas fa-arrows-alt-v fa-stack-1x fa-inverse"></i>
        </span>
      </div>    
      </transition>
    </div>

        <!-- bottom panel -->
        <transition name="expand">
            <div v-if="isBottomPanelExpanded" class="bottomPanelContainer">
                Some content ....
            </div>
        </transition>
    </div>
</div>

Hope this help

Leave a comment