Like jQuery's slideUp
/ slideDown
, but for Vue!
Demo: https://codepen.io/danieldiekmeier/pen/YapGWq
npm i vue-slide-up-down
Usage with Webpack or other module bundlers:
import SlideUpDown from 'vue-slide-up-down'
// or
const SlideUpDown = require('vue-slide-up-down')
Vue.component('slide-up-down', SlideUpDown)
Or use the UMD build directly in your browser (the component is provided as window.VueSlideUpDown
).
<script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/vue-slide-up-down/dist/vue-slide-up-down.umd.js"></script>
<script type="text/javascript">
Vue.component('slide-up-down', VueSlideUpDown);
</script>
The component takes three props:
active
(Boolean): Whether to show the component (true
) or not (false
)duration
(Number): How long the animation is supposed to be, in milliseconds. Defaults to500
.tag
(String): Which HTML tag to use for the wrapper element. Defaults todiv
.
<div class="MyContent">
<h1>Always show this</h1>
<slide-up-down :active="active" :duration="1000">
Only show this if "active” is true
</slide-up-down>
</div>
If you need to trigger a relayout (for example if your content changed), you can call the .layout()
method on your slide-up-down instance:
<slide-up-down ref="upDown">{{ myContent }}</slide-up-down>
And in your parent component:
watch: {
myContent () {
this.$refs.upDown.layout()
}
}
If you want to use a different timing function, add some CSS for your <slide-up-down>
element. (See demo/index.html
for a full example.)
<style>
.wobbly-accordeon {
transition-timing-function: cubic-bezier(0.195, 1.650, 0.435, -0.600);
}
</style>
<slide-up-down class="wobbly-accordeon">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta omnis velit ab culpa, officia, unde nesciunt temporibus cum reiciendis distinctio.
</slide-up-down>
To keep the codebase small, but powerful™, this package doesn't provide hooks for transitionend
, transitionstart
or other events, but instead provides direct access to the DOM Element that does the actual sliding up and down:
Add a ref
to your SlideUpDown-Element:
<slide-up-down ref="upDown">My Content</slide-up-down>
And add the event listener you want:
mounted () {
const el = this.$refs.upDown.el
el.addEventListener('transitionend', () => {
console.log('transition ended')
})
}