Drawer sliding animation about vuetensils

[AustinGil]

Yep. This is a small typo in the docs due to the nature of how the styles are added. The styles in the docs don't actually effect the demos. I have to maintain those as a separate stylesheet. As a result, I have to maintain the same styles in both places. I got it right in the stylesheet here, but not in the docs.

Vue transitions changed how they handle class naming a while back. To fix your issue, replace .slide-right-enter with .slide-right-enter-from.

Thanks for catching this. I want these demos to be easy, copy/paste options. I'll fix it right now.

[AustinGil]

Actually, there was also a problem introduced with Vue's transition changes that makes coordinating transitions kind of weird and makes your desired effect kind of weird. It works, but I want to find a better solution. Here's what will get you where you want to be

<template>
  <VDrawer
    bg-transition="slide-right"
    :classes="{ bg: 'bg-black-alpha', content: 'bg-white' }"
  >
    <template #toggle="{ bind, on }">
      <button v-bind="bind" v-on="on">
        Toggle Drawer
      </button>
    </template>

    My drawer content
  </VDrawer>
</template>


<script>
import { VDrawer } from 'vuetensils/src/components';
export default {
  name: "App",
  components: {
    VDrawer,
  },
};
</script>

<style>
.vts-drawer__content {
  padding: 20px;
  color: #FFF;
  background: #222;
}

.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.5s ease;
}

.slide-right-enter-from,
.slide-right-leave-to {
  transform: translateX(-100%);
}

</style>

[lbineau]

Thank you for the fast answer, it seems to work!
I've updated the demo: https://codesandbox.io/s/crimson-lake-16dhk3?file=/src/App.vue

I just wonder how we can make it work with a fading black background in combination under the sliding panel, I'm not sure to understand it from the documentation.
It works for slideIn but not slideOut https://codesandbox.io/s/hungry-sinoussi-hd5bny?file=/src/App.vue

[AustinGil]

Yeah, that's exactly the issue I ran into when Vue changed how things worked. The example I have you slides the whole component in. To have a fading background, you'd have to only slide in the panel.

The component right now uses two transitions, one nested in the other. I think that may be the problem. If I switch it to one transition, it would make things possible with a slightly more complicated transition CSS, but definitely doable. But that would also introduce a breaking change :/

If you want to try cloning the component into your project and playing around with it to make it work then submitting a PR, I'd really appreciate it :)