Bring transition to size changing.
Change element's size with transition automaticlly when content is changed.
Demo is here.
Let's see HTML:
<!-- This is the content of your page. -->
<style>
#my-popup {
width: 300px;
padding: 30px;
margin: 30px;
background-color: red;
color: white;
font-size: 13px;
border: 1px solid black;
border-radius: 10px;
}
</style>
<!-- Element to observe. -->
<div id="my-popup">
<!-- Content will be changed, so is size. -->
<content-inside></content-inside>
</div>
We need to do some small work first:
<!-- For using Lens.js, -->
<!-- We must change it to: -->
<style>
#my-popup {
color: white;
font-size: 13px;
}
/* All styles related to box-sizing are transferred to this new role: */
#my-popup[data-lens="#my-popup"] {
width: 300px;
padding: 30px;
margin: 30px;
background-color: red;
border: 1px solid black;
border-radius: 10px;
}
</style>
<div id="my-popup">
<content-inside></content-inside>
</div>
Then add transition style in your project.
/*
Add this rule to your project. Specify transition value as you wish.
This will affect all Lens-instance's transition style.
*/
.lens-transition {
transition: all ease .5s;
}
/*
If you want something special:
*/
.lens-transition[data-lens="#my-popup"] {
transition: all cubic-bezier(0.4, 0, 1, 1) .4s;
}
Then call lens in JavaScript:
const Lens = require('lens.js')
// Observe height changing of "#my-popup".
const lens = new Lens('#my-popup')
lens.observe() // Rock and roll!
That's it! Leave it alone and have a coffee. The height will be changed automaticlly.
const lens = new Lens(selector | HTMLElement)
- Methods on lens instance:
- observe: Start observing. Size will be changed with transition automaticlly.
- disconnect: Stop observing, everything is going back to nomral.
- update: Update size manually.
Size will be changed with transition automaticlly.
lens.observe()
Four options available:
- width
- height
- watchStyle
- deepWatch
lens.observe({
width: true, // If enabled, width changing will be in transition.
// Default: true
height: true, // If enabled, height changing will be in transition.
// Default: true
watchStyle: true, // If enabled, every style changing in children element will be caught.
// Default: true.
deepWatch: true // If enabled, children in second and deeper level will be observed.
// Default: false.
})
No more changing. Everything is going back to nomral.
lens.disconnect()
lens.update() // Interface will be update immediately.
You can use it with resize
or something else.
window.addEventListener('resize', () => {
lens.update()
console.log('Updated.')
// ...
})
MIT.