A tiny vanilla-js library to conceal/reveal elements
npm install conceal-revealA tiny vanilla-js library to conceal/reveal elements.
Demo
Conceals the element.
Reveals the concealed element.
If the element is concealed, reveals the element, otherwise conceals the element.
Returns whether the element is concealed (including transitioning to be concealed).
``
$ npm i conceal-reveal
`js`
import 'conceal-reveal/css/conceal-reveal.min.css'
import { conceal, concealed, reveal, toggle } from 'conceal-reveal'
`html`
or for modern browsers:
`html`
`html`This content is visible by default and can be concealed.
conceal-reveal.js uses CSS transitions.
You can override the transition properties for whole elements or specific elements.
`css
/ part of conceal-reveal.css /
.concealing {
transition: all ease, opacity ease-in-out, border-width cubic-bezier(.5, 0, 1, .5);
transition-duration: .3s;
}
.revealing {
transition: all ease, opacity ease-in-out, border-width cubic-bezier(0, .5, .5, 1);
transition-duration: .3s;
}
`
`css
/ your css /
/ overriding transitions for whole elements /
.concealing,
.revealing {
transition-duration: .2s;
transition-timing-function: linear;
}
/ overriding transitions for specific element /
#my-content.concealing {
transition-duration: 1s;
transition-timing-function: ease-out;
}
``