基础 CSS 画布外过渡

Foundation CSS是由 ZURB 基金会于 2011 年 9 月构建的开源和响应式前端框架，可以轻松设计美观的响应式网站、应用程序和电子邮件，这些网站、应用程序和电子邮件看起来很棒并且可以在任何设备上访问。它被许多公司使用，例如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼。该框架建立在类似 SaaS 的引导程序之上。它更加复杂、灵活且易于定制。它还带有 CLI，因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具，用于在移动设备上更快地呈现。

画布外面板位于视口之外，并在激活时滑入。打开画布菜单有多种位置，即它可以从左、右、上或下打开，重叠我们的内容，推送我们的内容，并且可以使用粘性元素。这些是响应式移动模式，主要用于移动屏幕。这也可以用作中型和桌面屏幕上的侧边栏。

画布外转换有两种类型，即推送和重叠。在推送过渡的情况下，面板将内容推送到屏幕上，而在重叠情况下，面板与页面的内容重叠。

基础 CSS 画布外过渡类：

• off-canvas：此类创建一个 off-canvas 容器。
• off-canvas position-* ：此类用于通过指定特定位置来定位画布外。
• off-canvas-content：这是一个容器类，用于包含页面的主要内容。

Foundation CSS Off-canvas Transitions 属性：

• data-transition=”overlap” ：该属性可用于打开overlap & 重叠页面内容。
• data-transition=”push” ：该属性可用于推送打开侧边栏，也可用于推送页面内容。这是默认情况下使用的属性。
• data-off-canvas ：必须将此属性添加到 off-canvas 容器中，才能函数off-canvas。

句法：

    Content


    Content

示例 1：这是一个基本示例，说明了使用 Foundation CSS 进行的推送转换。

HTML

  

    Foundation CSS Off-canvas Transitions
    
    
    
    
    
    

  

    GeeksforGeeks
    Foundation CSS Off-canvas Transitions
    Push transition
    
    Push
    
    
        
            
                
                    I am inside left off-canvas
                
                
                    
                        the one-stop solution is GeeksforGeeks DSA
                        Self-Paced Course with Lifetime Access
                        is a complete package for you to learn 
                        and master all the Data Structures & 
                        Algorithms concepts from scratch and that 
                        too at your own pace!
                    
                
            
        
    
    
        $(document).foundation();
    

输出：

示例 2：这是一个基本示例，说明了使用 Foundation CSS 制作的重叠过渡。

HTML

  

    Foundation CSS Off-canvas Transitions
    
    
      
    
    
    
    

  

    GeeksforGeeks
    Foundation CSS Off-canvas Transitions
    Overlap transition
    
    Overlap
    
    
        
            
                
                    I am inside left off-canvas
                
                
                        
                            the one-stop solution is GeeksforGeeks DSA
                            Self-Paced Course with Lifetime Access
                            is a complete package for you to learn 
                            and master all the Data Structures & 
                            Algorithms concepts from scratch and that 
                            too at your own pace!
                        
                
            
        
    
    
        $(document).foundation();
    

输出：

参考： https://get.foundation/sites/docs/off-canvas.html#off-canvas-transitions