我尝试将一些主要通过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>
&#13;
答案 0 :(得分:0)
我使用transition
包装器来实现这一点,但代码并不像我预期的那样优雅。特别是在drawer-wrapper
类中使用以下属性:
top: 100%;
transform: translateY(-100%);
小提琴是here
如果有人可以进一步简化代码,我真的很感激。