
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
v-show-slide
Advanced tools
Vue.js directive for animating element to and from height: auto in a sliding motion
A Vue.js directive for animating an element from height: auto
to height: 0px
and vice-versa.
There is no pure CSS way to animate an element to or from height: auto
, this Vue.js directive solves this. It works the same way as v-show
but will show the element with a sliding animation.
Demo can be viewed here: http://v-show-slide.peterhegman.com/
Source code for demo can be viewed in src/Demo.vue
yarn add v-show-slide
npm install v-show-slide --save
In your main JS file first import this plugin
import VShowSlide from 'v-show-slide'
Install the plugin
Vue.use(VShowSlide)
Once the plugin is installed the v-show-slide
directive can be used in any of your components. This directive works the same way as v-show
. If the value is true
the element will slide open, if the value is false
the element will slide closed.
Example:
<template>
<div id="app" class="app">
<ul id="features" v-show-slide="featuresOpen" class="features">
<li>Aliquam lorem</li>
<li>Praesent porttitor nulla vitae posuere</li>
<li>Suspendisse nisl elit rhoncus</li>
<li>Donec mi odio faucibus</li>
<li>Curabitur suscipit suscipit</li>
</ul>
<button
@click="toggleFeatures"
class="toggle-features"
aria-controls="features"
:aria-expanded="featuresOpen ? 'true' : 'false'"
>
{{ featuresOpen ? 'Hide Features' : 'View Features' }}
</button>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
featuresOpen: false,
}
},
methods: {
toggleFeatures() {
this.featuresOpen = !this.featuresOpen
},
},
}
</script>
By default duration is set to 300ms and easing is set to ease
.
To override this, duration and easing can be passed as arguments to the directive. Duration should be defined in milliseconds. Built in easing options are: linear
, ease
, ease-in
, ease-out
, ease-in-out
Duration and easing can be set in this format v-show-slide:duration:easing
Example:
<ul v-show-slide:400:ease-in="featuresOpen" class="features">
<li>Aliquam lorem</li>
<li>Praesent porttitor nulla vitae posuere</li>
<li>Suspendisse nisl elit rhoncus</li>
<li>Donec mi odio faucibus</li>
<li>Curabitur suscipit suscipit</li>
</ul>
If you want to define custom easing using cubic-bezier
this can be done when installing the plugin. Pass an options object as the second parameter in Vue.use
.
Example:
Vue.use(VShowSlide, {
customEasing: {
exampleEasing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
},
})
Your custom easing can then be used like so (make sure to convert easing name to kebab-case):
v-show-slide:400:example-easing
Events are fired on the same element the directive was defined on. Below are the available events:
Event | Description |
---|---|
@slide-open-start | Fired when the element starts sliding open |
@slide-open-end | Fired when the element finishes sliding open |
@slide-close-start | Fired when the element starts sliding closed |
@slide-close-end | Fired when the element finishes sliding closed |
Example:
<template>
<div id="app" class="app">
<ul
id="features"
v-show-slide="featuresOpen"
class="features"
@slide-open-start="slideOpenStart"
@slide-open-end="slideOpenEnd"
@slide-close-start="slideCloseStart"
@slide-close-end="slideCloseEnd"
>
<li>Aliquam lorem</li>
<li>Praesent porttitor nulla vitae posuere</li>
<li>Suspendisse nisl elit rhoncus</li>
<li>Donec mi odio faucibus</li>
<li>Curabitur suscipit suscipit</li>
</ul>
<button
@click="toggleFeatures"
class="toggle-features"
aria-controls="features"
:aria-expanded="featuresOpen ? 'true' : 'false'"
>
{{ featuresOpen ? 'Hide Features' : 'View Features' }}
</button>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
featuresOpen: false,
}
},
methods: {
toggleFeatures() {
this.featuresOpen = !this.featuresOpen
},
slideOpenStart() {
console.log('Slide Open Start')
},
slideOpenEnd() {
console.log('Slide Open End')
},
slideCloseStart() {
console.log('Slide Close Start')
},
slideCloseEnd() {
console.log('Slide Close End')
},
},
}
</script>
This directive will prevent child elements of the sliding element from being focusable when closed. Other than that it does not handle any other aspects of a11y such as adding or removing of aria
attributes. Check out the WAI-ARIA Authoring Practices for more information. The most basic setup is to use aria-expanded
and aria-controls
as shown in the above example.
![]() IE / Edge | ![]() Firefox | ![]() Chrome | ![]() Safari | ![]() iOS Safari |
---|---|---|---|---|
IE11, Edge | ✅ | ✅ | ✅ | > iOS 9 |
Please open an issue for support.
Please contribute using Github Flow. Create a branch, add commits, and open a pull request.
FAQs
Vue.js directive for animating element to and from height: auto in a sliding motion
The npm package v-show-slide receives a total of 2,549 weekly downloads. As such, v-show-slide popularity was classified as popular.
We found that v-show-slide demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.