beginHidden Boolean false Makes the animating element hidden before the animation starts <MDBAnimation beginHidden /> tag String 'div' Defines tag of the MDBAnimation element <MDBAnimation tag="div" /> trigger String 'onClick Set how to run the animation (onClick, onLoad, onScroll, onHover, manually) <MDBAnimation trigger="manually" /> v-model Boolean false Toggle animation when trigger="manually" <MDBAnimation trigger="manually" v-model="true" /> animation String 'fade-in' Changes animation <MDBAnimation animation="fade-out" /> reset Boolean false Set to reset the animation after it finishes <MDBAnimation reset /> duration Number 500 Set animation duration <MDBAnimation :duration="1000" /> delay Number 0 Set animation delay <MDBAnimation :delay="300" /> interval Number 0 Set the time interval between animations <MDBAnimation :interval="300" /> repeat Boolean / Number false Set animation repeat - set true to repeat infinity or enter the number of times the animation should repeat <MDBAnimation :repeat="3" /> direction String 'normal' Set animation direction <MDBAnimation direction="reverse" /> repeatOnScroll Boolean false Set to true to start the animation each time the item appears on the screen <MDBAnimation trigger="onScroll" repeatOnScroll /> scrollOffset Number 0 Set offset for animate on scroll <MDBAnimation trigger="onScroll" :scrollOffset="200" /> showOnLoad Boolean true Define whether item should be visible on the screen before the animation runs. Set false to start the scrolling animation immediately after the page loads. NOTE: this will hide elements that are not currently visible on the screen and this may have a negative impact on SEO <MDBAnimation trigger="onScroll" :showOnLoad="200" /> Methods Name Description Example startAnimation Start animating the element. Use on animation component ref element animationRef.startAnimation() stopAnimation Stop animating the element (e.g. if it has repeteable animation or interval). Use on animation component ref element animationRef.stopAnimation() Events Name Description hide This event fires immediately when the element sets its visibility to hidden show This event fires immediately when the element sets its visibility to visible start This event fires immediately after animation start end This event fires immediately after animation end CSS variables
As part of MDB’s evolving CSS variables approach, animations now uses local CSS variables on .animation for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4