How do I make toggle button stick with div while it's sliding? Vue.js

Question

I have a div that slides (out to left/in from left) when the toggle button is clicked on. I'm using Vue.js's transition component to handle the slide animation. The slide animation for the div works as intended, but my problem is that the toggle button doesn't stick with the div while it's sliding (out/in). Both are nested within a container.

Here's the codepen: https://codepen.io/chataolauj/pen/jOrOWpL

#app {
  width: 100vw;
  height: 100vh;
}

#container {
  z-index: 1;
  position: absolute;
  width: 28%;
  height: 100%;
  display: flex;
  background-color: white;

  #event-list {
    width: 100%;
    height: 100%;
    background: white;
    box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.3);
  }

  .toggle-button {
    margin-top: 8px;
    height: 48px;
    background-color: rgba(255, 255, 255, 0.9);
    border-left: 1px solid #d4d4d4;
    box-shadow: 3px -1px 7px 0px rgba(0, 0, 0, 0.3);
    outline: none;

    &:hover {
      cursor: pointer;
      background-color: rgba(255, 255, 255, .5);
    }
  }
}

.slide-in-out-enter-active {
  animation: slide-in-out 0.5s reverse;
}

.slide-in-out-leave-active {
  animation: slide-in-out 0.5s;
}

@keyframes slide-in-out {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

<div id="app">
      <div id="container">
        <transition name="slide-in-out">
          <div v-if="toggle" id="event-list">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet ante id finibus molestie. Mauris pharetra vel est id dictum. In varius, mi in interdum dignissim, nulla erat congue erat, viverra consequat felis libero vel sem. Pellentesque vel ex tristique, ultrices tortor vel, consequat erat. Nulla ornare porttitor nisl.</p>
          </div>
        </transition>
        <button @click="toggle = !toggle" class="toggle-button">Toggle
        </button>
      </div>
</div>

EDIT: @Cuong Le Ngoc's answer did satisfy my question, but seeing the texting wrapping while the panel is "sliding" makes it seem more like a "shrink" transition than a "slide" transition. It's a dealbreaker for me. I'm trying to emulate Google Maps sliding panel.

Cuong Le Ngoc Cuong Le Ngoc · Accepted Answer · 2020-10-07T08:06:30

You can use animation with width instead of transform: translateX(...) and use overflow-wrap: break-word; to prevent text overflow:

#event-list {
  ...
  overflow-wrap: break-word;
}

And:

@keyframes slide-in-out {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

Codepen

EDIT: You can use margin-left instead of width if you prefer slide transition

@keyframes slide-in-out {
  0% {
    margin-left: 0%;
  }
  100% {
    margin-left: -100%;
  }
}

Codepen

How do I make toggle button stick with div while it's sliding? Vue.js

1 Answers