Foundation CSS Motion UI JavaScript 参考

Foundation CSS是最好的响应式框架之一。 CSS 框架适用于任何设备、屏幕，并且可以广泛访问。我们可以在基础 CSS 的帮助下制作漂亮的响应式网站。它是一个高度可定制的框架。它是由 ZURB 基金会构建的开源框架。

Foundation CSS Motion UI 是一个用于在网站中创建灵活的 UI 过渡和动画的库。我们可以使用内置动画，也可以使用这个库创建我们自己的动画。 Javascript Reference 允许使用 javascript 在元素上播放动画。我们可以运行任何请求的动画而无需在元素上指定它，并且可以使用 Javascript 进行修改。

Foundation CSS Motion UI Javascript 参考类：

• Motion.animateIn：用于播放动画。
• Motion.animateOut：用于播放动画。

语法：选择要播放动画的元素，然后使用以下语法播放动画：

var elem = $('#img')
var anim = 'spin-in-ccw'
Motion.animateIn(elem, anim) 

示例：在下面的示例中，我们有一个图像，我们使用 Foundation CSS 中的 Motion UI 选项在其上播放动画和输出动画。

HTML

  

      
    
    
    
    
  
    
    
    
    

  

    
        
            
                GeeksforGeeks
            
        
        
            Foundation CSS Motion UI Javascript Reference
        
        
        
            Play In Animation using Javascript
        
        
         
            Play Out Animation using Javascript
        
    
     
        
    
    
        $(document).ready(function() {
            $(document).foundation()
        })
        const animateInImage = () => {
            var elem = $('#img') // Element
            var anim = 'spin-in-ccw' // Animation name
            Motion.animateIn(elem, anim) // Play Animation
        }
        const animateOutImage = () => {
            var elem = $('#img') // Element
            var anim = 'spin-out-ccw' // Animation name
            Motion.animateOut(elem, anim) // Play Animation
        }
    

输出：

参考： https ://get.foundation/sites/docs/motion-ui.html#javascript-reference