动画制作 MDB Pro component

动画-Bootstrap 5和Material Design 2.0

微妙而流畅的MDB动画在以下情况下为用户提供独特的体验 与UI交互。有数十种动画可供您使用,还有许多 定制和实施选项。

注意:阅读 API 标签以找到所有可用选项,然后 高级定制

Video tutorial

将鼠标移到下面的正方形上以启动动画。

fade-in
fade-in-down
fade-in-left
fade-in-right
fade-in-up
fade-out
fade-out-down
fade-out-left
fade-out-right
fade-out-up
slide-in-down
slide-in-left
slide-in-right
slide-in-up
slide-out-down
slide-out-left
slide-out-right
slide-out-up
slide-down
slide-left
slide-right
slide-up
zoom-in
zoom-out
tada
pulse

基本例子

实现动画的最简单方法是使用data-mdb-attributes。在这个例子中 在下面,我们使用图标 <i class="fas fa-car-side fa-3x"></i> 并添加属性 data-mdb-toggle="animation" data-mdb-animation-reset="true" data-mdb-animation="slide-out-right" 给它点击动画

data-mdb-toggle="animation" 是每个动画的必需属性。

data-mdb-animation-reset="true" 让您决定是否可以重复播放动画

data-mdb-animation="slide-right" 可让您指定将哪个动画应用于 元件。在里面 demo section 以上您可以找到可用的 动画。

单击汽车以开始动画。


动画列表

默认情况下,您可以访问基本动画。但是,您也可以导入 _animate-extended.scss 并编译扩展动画。

基本动画

  • fade-in
  • fade-in-down
  • fade-in-left
  • fade-in-right
  • fade-in-up
  • fade-out
  • fade-out-down
  • fade-out-left
  • fade-out-right
  • fade-out-up
  • slide-in-down
  • slide-in-left
  • slide-in-right
  • slide-in-up
  • slide-out-dDown
  • slide-out-left
  • slide-out-right
  • slide-out-up
  • slide-down
  • slide-left
  • slide-right
  • slide-up
  • zoom-in
  • zoom-out
  • tada
  • pulse

Extended Animations

  • drop-in
  • drop-out
  • fly-in
  • fly-in-up
  • fly-in-down
  • fly-in-left
  • fly-in-right
  • fly-out
  • fly-out-up
  • fly-out-down
  • fly-out-left
  • fly-out-right
  • browse-in
  • browse-out
  • browse-out-left
  • browse-out-right
  • jiggle
  • flash
  • shake
  • glow

启动选项

有几种启动动画的选项。

点击时

点击动画是默认启动选项,因此不需要 任何data-mdb属性。

悬停时

采用data-mdb-animation-start="onHover" 在鼠标悬停时启动动画。

负载

采用 data-mdb-animation-start="onLoad" to加载动画后开始动画 页。刷新浏览器以查看此效果。

手动地

采用 data-mdb-animation-start="manually" 至初始化组件而无需 动画,添加悬停,单击或滚动事件,并使用 要启动动画时的 animationStart 方法。

滚动

采用data-mdb-animation-start="onScroll" 滚动时启动动画 页面并到达元素。

请注意,动画只会启动一次-即使到达该动画 滚动多次时。

重复滚动动画

如果要在滚动使用时每次到达动画时启动动画 data-mdb-animation-on-scroll="repeat".

负载显示

如果您使用动画 onScroll ,则默认情况下,当 页面已加载。它们消失并在第一卷滚动后开始制作动画。你可以改变 通过设置 data-mdb-animation-show-on-load="false". 但是请记住 可能会对SEO产生负面影响。


例子

动画的实际用法示例。

通过外部元素启动

单击或悬停按钮以启动动画。

手动启动动画

您可以使用 animationStart animationStop 方法启动 或在适当的时候停止动画

更改动画类型

您可以随时使用来更改元素的动画类型 changeAnimationType()方法。

清单群组

单击“添加”按钮将新项目添加到列表中。

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

手风琴

单击手风琴的可折叠组以查看动画。

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

动画制作 - API


用法

通过CSS类


          <i class="fas fa-car-side fa-3x animation slide-out-right"></i>
        

通过数据属性


          <i
            data-mdb-toggle="animation"
            data-mdb-animation="tada"
            data-mdb-animation-start="onLoad"
            class="fas fa-star fa-3x"
          ></i>
        

通过JavaScript


        const element = document.getElementById('example');
        const animate = new mdb.Animate(element, { animation: 'tada', }); 
        animate.init();
        

通过数据jQuery


          $('#example').animate({ animation: 'tada' });
        

选件

Name Data attribute Type Default Description
animation data-mdb-animation String 'fade' Changes animation
animationStart data-mdb-animation-start String 'animationOnClick' Set how to run the animation (onClick, onLoad, onScroll, onHover, manually)
animationReset data-mdb-animation-reset Boolean false Set to reset the animation after it finishes
animationShowOnLoad data-mdb-animation-show-on-load Bollean true 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
animationOnScroll data-mdb-animation-on-scroll String once Set repeat to start the animation each time the item appears on the screen
onStart - Function Callback function fires after start animation
onEnd - Function Callback function fires after end animation
onHide - Function Callback function fires after show element
onShow - Function Callback function fires after hide element
animationOffset data-mdb-animation-offset Number 0 Set offset for animate on scroll
animationDelay data-mdb-animation-delay Number 0 Set animation delay
animationDuration data-mdb-animation-duration number 500 Set animation duration
animationReverse data-mdb-animation-reverse Boolean false Set true to played animation forwards first, then backwards
animationInterval data-mdb-animation-interval Number 0 Set the time interval between animations
animationRepeat data-mdb-animation-repeat Boolean/Number false Set animation repeat - set true to repeat infinity or enter the number of times the animation should repeat

方法

Name Description Example
dispose Destroy animations with this method animation.dispose()
startAnimation Start animating the element animation.startAnimation()
dispose Stop animating the element animation.stopAnimation()
changeAnimationType Change the animation type of an element animation.changeAnimationType()

        const animateEl = document.getElementById('animate');
        const animate  = new mdb.Animate(manuallyEl, {
          animation: 'fade-in',
          animationStart: 'manually',
        });
        animate.startAnimation();
      

通过CSS类自定义动画

Name Description
infinite Set infinite animation
delay-1s Set animation delay to delay-1s
delay-2s Set animation delay to delay-2s
delay-3s Set animation delay to delay-3s
delay-4s Set animation delay to delay-4s
delay-5s Set animation delay to delay-5s
fast Set animation duration to 800ms
faster Set animation duration to 500ms
slow Set animation duration to 2s
slower Set animation duration to 3s

回呼

Name Description
onStart This callback fires before the animation starts.
onEnd This callback starts immediately after the animation has finished.
onShow If you use animate on scroll this callback will start when the element appears on the screen.
onHide If you use animate on scroll this callback will start after the element disappears from the screen.

        const animateEl = document.getElementById('animate');
        const animate  = new mdb.Animate(manuallyEl, {
          animation: 'fade-in',
          onStart: () => {
            // do something.
          }
        });
        animate.init();