使用Vue Transition Wrapper的基于变换的动画

Question

我试图将一些主要通过css和小javascript实现的动画移植到Vue组件。动画很简单 - 用户点击一个按钮，从浏览器底部打开一个小面板并向上滑动。

我有一个工作的Vue组件使用相同的css和没有javascript实现。

现在，我知道transition提供的Vue包装。但是我无法弄清楚如何使用transition包装器获得类似的功能（如果有的话）。

有人可以帮帮我吗？

// register modal component
Vue.component('modal', {
  template: '#modal-template',
  props: ['show']
})

// start app
new Vue({
  el: '#app',
  data: {
    showModal: false
  }
})

.drawer-wrapper {
  position: fixed;
  top: 100%;
  left: 0;
  right: 0;
  height: 50%;
  z-index: 9998;
  transition: transform .3s ease-out;
}

.drawer-wrapper.open {
  transform: translateY(-100%);
}

.drawer-container {
  height: 100%;
  width: 100%;
  background-color: white;
}

.drawer-header h3 {
  margin-top: 0;
  color: #42b983;
}

.drawer-body {
  margin: 20px 0;
}

.drawer-default-button {
  float: right;
}

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>

<!-- template for the modal component -->
<script type="text/x-template" id="modal-template">
        <div class="drawer-wrapper" :class="{ open: show }">
            <div class="drawer-container">

                <div class="drawer-header">
                    <slot name="header">
                        default header
                    </slot>
                </div>

                <div class="drawer-body">
                    <slot name="body">
                        default body
                    </slot>
                </div>

                <div class="drawer-footer">
                    <slot name="footer">
                        default footer
                        <button class="drawer-default-button" @click="$emit('close')">
                            OK
                        </button>
                    </slot>
                </div>
            </div>
        </div>
</script>

<!-- app -->
<div id="app">
  <button id="show-modal" @click="showModal = true">Show Modal</button>
  <!-- use the modal component, pass in the prop -->
  <modal @close="showModal = false" :show="showModal">
    <!--
      you can use custom content here to overwrite
      default content
    -->
    <h3 slot="header">custom header</h3>
  </modal>
</div>

Answer 1

我使用transition包装器来使用它，但代码并不像我预期的那么优雅。特别是在drawer-wrapper类中使用以下属性：

top: 100%;
transform: translateY(-100%); 

小提琴是here

如果有人可以进一步简化代码，我真的很感激。