CODEWITHSUNDEEP
vue.js
haggis
haggis

Reputation: 417

How to simultaniously transition two elements at once?

I'm trying to create a sidebar which can slide-in and -out by clicking on a trigger element. The trigger-element should be sticked to the sidebar. However, in my current fiddle, the triggler-element only changes position after the sidebar completed its transition.

How can I accomplish the expected behavior?

new Vue({
  el: "#app",
  data: {
    exposed: true
  }
})
.sidebar {
  width: 200px;
  height: 200px;
}

.toggler {
  height: 30px;
}

/**********************
 * Transition classes *
 **********************/
.slide-leave-active,
.slide-enter-active {
  transition: 1s;
}
.slide-enter {
  transform: translate(-200px, 0);
}
.slide-leave-to {
  transform: translate(-200px, 0);
}
<script src="https://vuejs.org/js/vue.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div id="app" class="px-0 py-4">
  <div class="d-flex">
  
    <!-- Sidebar content -->
    <transition name="slide">
      <div v-if="exposed" class="sidebar bg-dark text-white p-1">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </transition>
    
    <!-- Sidebar toggler -->
    <div class="toggler px-2 bg-secondary">
      <a href="#" v-on:click="exposed = !exposed" class="text-white">
        <span v-if="exposed">[X]</span>
        <span v-else>(?)</span>
      </a>
    </div>
    
  </div>
</div>

jsfiddle

Upvotes: 1

Views: 1380

Answers (3)

Jay
Jay

Reputation: 111

I made minor css change as below 

.slide-enter {
  margin-left:-200px;
}

.slide-enter-to {
  margin-left:0px;
}

.slide-leave-to {
  margin-left:-200px;
}

Please check if it works. https://jsfiddle.net/z43xug9n/3/

Upvotes: 2

Wang Sheng
Wang Sheng

Reputation: 780

If you want to slide both the sidebar and the toggle at the same time, it is better to slide their parent (container).

https://jsfiddle.net/4mju0rzt/31/

<div id="app">
    <div v-bind:class="{'minimized': hide}" class="sidebar-container">
        <div class="sidebar bg-dark text-white p-1">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>
        <!-- Sidebar toggler -->
        <div class="toggler px-2 bg-secondary">
            <a href="#" v-on:click="hide = !hide" class="text-white">
                <span v-if="!hide">[X]</span>
                <span v-else>(?)</span>
            </a>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            hide: false
        }
    })
</script>

Upvotes: 1

haggis
haggis

Reputation: 417

Found a solution with Velocity.js. The trick is to move the sidebar away instead of removing it from the DOM.

new Vue({
  el: "#app",
  data: {
    exposed: true
  },
  methods: {
  	slideIn (el, done) {
    	Velocity(el, {
        marginLeft: 0
      }, {
        duration: 500
      }, {
        complete: done
      });
    },
    
    slideOut (el, done) {
    	Velocity(el, {
        marginLeft: -200
      }, {
        duration: 500
      }, {
        complete: done
      });
    }
  }
})
.sidebar {
  width: 200px;
  height: 200px;
}

.toggler {
  height: 30px;
  width: 36px;
}
<script src="https://vuejs.org/js/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.3/velocity.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="app" class="px-0 py-4">
  <div class="d-flex">
  
    <!-- Sidebar content -->
    <transition v-on:enter="slideIn" v-on:leave="slideOut">
      <div v-show="exposed" id="sidebar" class="sidebar bg-dark text-white p-1">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </transition>
    
    <!-- Sidebar toggler -->
    <div class="toggler px-2 bg-secondary">
      <a href="#" v-on:click="exposed = !exposed" class="text-white">
        <span v-if="exposed">[X]</span>
        <span v-else>(?)</span>
      </a>
    </div>
    
  </div>
</div>

Upvotes: 0

Related Questions