Foundation CSS Motion UI 在组件中的使用

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

Foundation CSS Motion UI 库提供了大量的内置动画以及轻松创建自定义动画的能力。许多 Foundation 组件动画使用 Motion UI 库。

Foundation CSS Motion UI Usage in Components 让我们可以为不同的组件使用动画。这些组件具有为动画定义的字段，我们可以在这些组件中使用自定义或内置转换。

带有选项的组件中的基础 CSS Motion UI 用法：

• 轨道：数据动画
• 显示：数据动画输入，数据动画输出
• 切换器：数据动画
• 响应式切换器：数据动画

语法：添加 data-animate 选项并根据元素，向其中添加 animate in 和 animate out 选项值。我们已将切换器更改如下：

    
A computer science portal for geeks
    

示例（切换器）：在以下示例中，我们放置了一个切换器来显示/隐藏面板。

HTML

  

    
    
    
    
    
    
    
    
    
  
    
    

  

    
        
            GeeksforGeeks
        
        Foundation CSS Motion UI Usage in Components
        
  
        Toggle Panel
  
        
            A computer science portal for geeks
            
        
    
  
    
        $(document).ready(function () {
            $(document).foundation()
        })
    

  

输出：

示例（显示）：在下面的示例中，我们有一个显示元素，用于显示具有进入和退出动画的模式。

HTML

  

    
    
    
    
    
    
    
    
    
  
    
    

  

    
        
            GeeksforGeeks
        
        Foundation CSS Motion UI Usage in Components
        
  
        
            
                Reveal Modal
            
        
  
        
            GeeksforGeeks
            
                A computer science portal for geeks.
            
  
            
                ×
            
        
    
    
        $(document).ready(function () {
            $(document).foundation()
        })
    

  

输出：

参考： https ://get.foundation/sites/docs/motion-ui.html#usage-in-components