Declarative element size observer and provider
npm install vue-size-providerDeclarative element size observer and provider.
Sometimes you may want to animate an element height when its content is changed. In that case, you need to directly read height value from DOM because Virtual DOM cannot acquire element size. Since it is low-level manipulation, the code may be more messy.
vue-size-provider solves this problem by hiding low-level code with abstract helper components -
!Simple demo of vue-size-provider
Install it via npm:
``sh`
$ npm install vue-size-provider
Then, notify Vue to use it:
`js
import Vue from 'vue'
import VueSizeProvider from 'vue-size-provider'
Vue.use(VueSizeProvider)
`
Or you can directly use the components:
`vue`
First, wrap elements that you would like to observe their size by .
`vue
`
Then, wrap them by and any element that you want to animate its size when the contents size is changed.
` vue
`
Finally, you need to write some animation code. In this example, we simply use CSS transition:
` vue
``
MIT