css3变换、过渡与动画_带有CSS3过渡和变换的画布菜单

最新推荐文章于 2022-06-11 21:46:33 发布

culiu9261

最新推荐文章于 2022-06-11 21:46:33 发布

阅读量228

点赞数

文章标签： css java html5 css3 javascript ViewUI

原文链接：https://scotch.io/tutorials/off-canvas-menus-with-css3-transitions-and-transforms

版权

css3变换、过渡与动画

Now as an easy to use jQuery Plugin

现在作为易于使用的jQuery插件

介绍 ( Introduction )

Off Canvas Menus are used primarily with Mobile and touch devices and can provide an extremely useful and beautiful experience for your users. This tutorial will cover an introduction on them, a getting started guide, some improvement tricks, and then finally some awesome demos for you to build off of. Instead of JavaScript, we'll use CSS3 Transitions and Translations for the animation making them smoother, better performing, and easier to tweak and customize.

Off Canvas菜单主要用于移动设备和触摸设备，可以为您的用户提供极为有用和优美的体验。本教程将介绍它们的介绍，入门指南，一些改进技巧，最后是一些很棒的演示供您使用。代替JavaScript，我们将使用CSS3 Transitions和Translations进行动画处理，使它们更平滑，性能更好，更易于调整和自定义。

What the heck are Off Canvas Menus anyways? I'm not really sure where this name or terminology originated, but if you haven't heard of it before, they're basically your mobile "side menus". They live outside of the viewport and are only shown when a certain event occurs (which is usually a click toggling the menu). This has the obvious and similar benefit of dropdowns menus with a lot more flair.

无论如何，“ 关闭画布”菜单到底是什么？我不太确定这个名称或术语的起源，但是如果您以前从未听说过，它们基本上就是您的移动“侧边菜单”。它们位于视口之外，仅在发生特定事件时显示（通常是单击以切换菜单）。这具有下拉菜单明显且相似的优点，而且功能更多。

这是一个基本的演示： ( Here's a basic demo: )

苏格兰威士忌苏格兰威士忌
( Scotchy Scotch Scotch
)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim diam at dolor commodo posuere. Suspendisse aliquam lacus lectus, et bibendum mauris sollicitudin et. Integer volutpat felis nec urna lacinia ullamcorper. Pellentesque sem nisi, tincidunt in vestibulum et, pharetra fermentum risus. Sed ultricies molestie massa id hendrerit. Donec luctus luctus velit, tincidunt laoreet lorem dictum non. Etiam gravida sed lacus eu mollis. Nunc eu augue quis enim vestibulum mollis. Donec neque augue, aliquet sed fringilla a, convallis sit amet tortor.

Lorem ipsum dolor坐下，一直保持良好状态。 Vivamus dignissim diam在dolor commodo posuere。 Suspendisse aliquam lacus lectus等。整数volutpat felis nec urna lacinia ullamcorper。 Pellentesque sem nisi，前庭的cicidunt等，发酵菌的风险。塞德（Sed）的暴动骚扰了群众。 Donec luctus luctus velit，非锡西蒂特·劳雷特·洛雷姆 Etiam gravida sed lacus eu mollis。 Nol eu auau quis enim前庭软体动物。 Donec neque augue，aliquet sed fringilla a，康瓦尔利斯坐在amet的tortor。

其他一些资源和演示： ( Some other resources and demos: )

入门 ( Getting Started )

As with anything programming related, there are multiple ways or methods to the same solution. The solution that I'm going to show you is one that I like to use because it's simple, extremely obvious to use, and will leave the door wide-open for you to improve and tweak. You'll find after following these steps that you'll be able to get much more creative with it than where the tutorial goes using only CSS.

与任何与编程相关的事情一样，同一解决方案有多种方式或方法。那我要告诉你的解决方案是一个我喜欢使用，因为它的简单，非常明显的使用，并把大门全开，为您改善和调整。完成这些步骤后，您会发现，与仅使用CSS进行教学相比，您将获得更多的创造力。

Heads Up! This example doesn't completely cover cross-browser support and is only meant to be the simplest bare-boned example possible. Read this 小心！ 这个例子并没有完全涵盖跨浏览器的支持，仅是可能的最简单的简单例子。请阅读本 section for that. Otherwise, you'll have to use Chrome if you follow the steps step-by-step to get it working. 节内容。否则，如果您按照步骤逐步进行操作，则必须使用Chrome。

这个怎么运作 ( How it works )

For the purpose of this article and keeping naming convention consistent amongst already existing resources, we'll continue to use the term Canvas. Although I think this is confusing because I feel that namespace is already reserved for HTML5 Canvas. This has absolutely nothing to do with that. A name that would make more sense would be Off Viewport Menus.

为了本文的目的，并在已有资源之间保持命名约定的一致性，我们将继续使用术语Canvas 。尽管我认为这很令人困惑，因为我认为名称空间已经为HTML5 Canvas保留了。这绝对与之无关。一个更有意义的名称是“ 关闭视口菜单” 。

Anyways, here's the terminology broken down for the tutorial and a blueprint of how to make Off Canvas Menus:

无论如何，这是本教程分解的术语，以及如何制作“关闭画布”菜单的蓝图：

Wrapper
包装纸
Canvas
帆布
Menu
菜单

See the Pen OVPbKq by Chris Sevilleja (@sevilayha) on CodePen.

在CodePen上查看Chris Sevilleja （ @sevilayha ）的Pen OVPbKq 。

HTML ( The HTML )

From the blueprint above, lets build out the HTML. For this example, we'll be assuming this a full-window Off Canvas Menu. So, the first thing we're going to do is build a #site-wrapper div that wraps everything just after the body tag. The site wrapper will be used to hide overflowed elements without messing up the scroll. We'll go over that shortly.

从上面的蓝图开始，构建HTML。对于此示例，我们将假定它是全窗口的“关闭画布”菜单。因此，我们要做的第一件事是建立一个#site-wrapper div，该div将所有内容#site-wrapper在body标签之后。该站点包装器将用于隐藏溢出的元素，而不会弄乱滚动。我们会尽快解决。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="site-wrapper">


</div>
</body>
</html>

The next thing we're going to need to do add is our #site-canvas wrapper inside of our #site-wrapper. The canvas part is what slides left and right and holds all the content of the page.

接下来需要添加的是#site-canvas wrapper中的#site-canvas包装#site-wrapper 。画布部分是向左和向右滑动并保留页面所有内容的部分。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="site-wrapper">
<div id="site-canvas">

</div>
</div>
</body>
</html>

Another piece that we need to add is the #site-menu. From the blue print above, it might be a little deceiving. We're actually going to put the menu inside of #site-canvas despite that it appears outside of the element. The reason we do this is because we want the menu to slide when we move the canvas (again, which basically holds everything). Later, we'll position absolute the menu to appear outside of the canvas container.

我们需要添加的另一部分是#site-menu 。从上面的蓝图看，这可能有点欺骗。实际上，我们将菜单放置在#site-canvas内，尽管它出现在元素外部。之所以这样做，是因为我们希望在移动画布时菜单再次滑动（再次，基本上可以容纳所有内容）。稍后，我们将菜单绝对放置在画布容器的外部。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="site-wrapper">
<div id="site-canvas">

<div id="site-menu">

</div>

</div>
</div>
</body>
</html>

The last necessary element that we need to add is an a tag to toggle the event of opening and closing the nav.

最后一个必要的因素，我们需要补充的是一个a切换打开和关闭导航的事件标签。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="site-wrapper">
<div id="site-wrapper">

<div id="site-menu">
<a href="#" class="toggle-nav">Toggle Nav</a>

</div>

</div>
</div>
</body>
</html>

The demo I'm doing also uses Bootstrap 3 (for speeding things up) and Font Awesome (for aesthetics), but neither are required for the tutorial. Below is it all together with some extra markup for the demo. The highlighted lines are the important stuff.

我正在做的演示还使用了Bootstrap 3（用于加快速度）和Font Awesome（用于美观），但本教程均不需要。以下是所有这些以及演示的一些额外标记。突出显示的行很重要。

<!doctype html>
<html>
<head>

<!-- Meta -->
<meta charset="utf-8">
<title>Off Canvas Menus Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Favicon -->
<link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="https://scotch.io/favicon.ico">

<!-- Styles -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="/path/to/your/custom/style.css">
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

</head>
<body>

<div id="site-wrapper">

<div id="site-canvas">



<div id="site-menu">
<h2>My Menu</h2>
<p class="lead">Put any HTML you want here.
Style it however you want.
<ul>
<li>Free to scroll up and down</li>
<li>But not left and write</li>
</ul>
</div>


<a href="#" class="toggle-nav btn btn-lg btn-success" id="big-sexy"><i class="fa fa-bars"></i> Toggle Nav</a>
<h1 class="text-center">Off Canvas Menu Tutorial</h1>
<p class="lead text-center">Basic demo showing how to easily implement an Off Canvas Menu by <a href="https://scotch.io">scotch.io</a>.

<!-- #site-canvas -->
</div>
<!-- #site-wrapper> -->
</div>

<!-- Scripts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/path/to/your/custom/power.js"></script>

</body>
</html>

div class="alert alert-warning"> Heads Up! If you're not operating this from a web server (aka your computer locally without a virtual environment), you'll need to change any CDN references from "//" to "https://" or "http://".

div class =“ alert alert-warning”> 小心！ 如果您不是通过网络服务器（也就是没有虚拟环境的本地计算机）来操作，则需要将所有CDN引用从“ // ”更改为“ https：// ”或“ http：// ” 。

CSS ( The CSS )

包装器 ( The Wrapper )

The wrapper, in this case #site-wrapper, is used to hide elements that overflow outside of it. The reason we need to hide overflowed elements on a wrapper instead of the body is so that we don't mess up scrolling. Try putting overflow: hidden; on a body tag and see what happens to scrolling.

包装器（在本例中为#site-wrapper ）用于隐藏在其外部溢出的元素。我们需要在包装器而不是主体上隐藏溢出的元素的原因是，这样我们就不会弄乱滚动。尝试将overflow: hidden; 在body标签上，看看滚动会发生什么。

By having the wrapper, you can actually specify how large you want the Off Canvas Menu block to be. This example is going to be full width, but as shown from the small demos above, you can essentially make it any size you want.

通过使用包装器，您实际上可以指定“关闭画布菜单”块的大小。这个示例将是全宽的，但是如上面的小演示所示，您基本上可以将其设置为任意大小。

The only thing weird that we're going to do for this demo is put a fixed height on this element. We're only doing this to mimic that we actually have content that fills our page.

我们为该演示要做的唯一奇怪的事情是在此元素上设置了固定的高度。我们这样做只是为了模仿我们实际上有填充页面的内容。

#site-wrapper {
position: relative;
overflow: hidden;
width: 100%;

height: 5000px; /* Temp: Simulates a tall page. */
}

“画布” ( The "Canvas" )

The #site-canvas is the actual element moving left and right. We'll set a transition on it for doing a smooth animation, and we'll also be just setting the transform property in preparation for movement. The technique we are using uses CSS3 Transforms to move the canvas instead of JavaScript. This technique makes it smoother and sexier.

#site-canvas是实际向左和向右移动的元素。我们将在其上设置过渡以进行平滑的动画处理，并且还将仅设置transform属性以准备运动。我们使用的技术使用CSS3变换来移动画布，而不是JavaScript。此技术使其更流畅，更性感。

#site-canvas {
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: .3s ease all;
  transition: .3s ease all;

  padding: 5% 0; /* Temp: Just spacing. */
}

菜单 ( The Menu )

Remember how the menu is inside of the canvas element, but positioned outside of it? Well, lets go ahead and add the CSS to make that happen:

还记得菜单如何在canvas元素内部，但位于其外部吗？好吧，让我们继续并添加CSS来实现这一点：

#site-menu {
  width: 300px;
  height: 100%;
  position: absolute;
  top: 0;
  left: -300px;
  background: #428bca;
  padding: 15px;
}

动画 ( The Animation )

The idea behind the animation is simple. When you want the menu to slide out, we'll add a class to the wrapper, then just add properties doing a smooth transition to slide the canvas over.

动画背后的想法很简单。当您希望菜单滑出时，我们将向包装器添加一个类，然后只需添加属性即可进行平滑过渡以将画布滑过。

#site-wrapper.show-nav #site-canvas {
  -webkit-transform: translateX(300px);
  transform: translateX(300px);
}

In order to add that class to the wrapper, we'll have to use JavaScript though.

为了将该类添加到包装器中，我们必须使用JavaScript。

JavaScript ( The JavaScript )

We need to be able to toggle the .show-nav class on the wrapper whenever we want to reveal the navigation per a certain event (which is going to be a click). We'll use the class .toggle-nav to detect click events. This way you can put the class on as many different a tags as you want (e.g.: You can place an a tag that says "Close" inside of the navigation to toggle the nav off so long that it has a class of .toggle-nav). We'll be using jQuery to speed things up.

每当我们想要显示每个特定事件的导航（将是一次单击）时，我们都需要能够在包装器上切换.show-nav类。我们将使用.toggle-nav类检测点击事件。这样，您就可以把类的许多不同的a你想要的标签（例如：您可以将一个a写着导航的“关闭”内部切换导航关闭这么长时间，它具有类的标签.toggle-nav ）。我们将使用jQuery加快速度。

/*====================================
=            ON DOM READY            =
====================================*/
$(function() {
  $('.toggle-nav').click(function() {
    // Calling a function in case you want to expand upon this.
    toggleNav();
  });
});


/*========================================
=            CUSTOM FUNCTIONS            =
========================================*/
function toggleNav() {
if ($('#site-wrapper').hasClass('show-nav')) {
  // Do things on Nav Close
  $('#site-wrapper').removeClass('show-nav');
} else {
  // Do things on Nav Open
  $('#site-wrapper').addClass('show-nav');
}

//$('#site-wrapper').toggleClass('show-nav');
}

You can expand or rewrite this however you'd like, but the main thing is to make sure that the wrapper class is toggling. Depending on the site, I'll sometimes put the .show-nav class on the body so I have full control to tweak any element on the page via CSS while the navigation is open if I need to.

您可以随意扩展或重写它，但主要是确保包装器类处于切换状态。根据站点的不同，有时会在主体上放置.show-nav类，以便在我需要.show-nav可以完全控制CSS来调整页面上的任何元素。

结果 ( The Result )

See the Pen Simple Off Canvas Menu with CSS3 Transitions and Translates by Nicholas Cerminara (@ncerminara) on CodePen.

请参阅CodePen上的Nicholas Cerminara（ @ncerminara ）撰写的带有CSS3过渡和转换功能的“钢笔简单关闭画布”菜单。

技巧和技巧增压 ( Tricks and Tips to Supercharge )

利用计算机的GPU ( Leverage the computer's GPU )

Since we are using translates to animate the opening and closing of the Off Canvas Menu, there's some somewhat unknown CSS3 tricks to help improve performance. If you use a 3D translate and the computer has it, you'll force the users computer to use hardware acceleration to make the animation smoother and faster. The difference might be very subtle, but for some users and machines it will make the world of difference. Here's the code:

由于我们使用转换为“关闭画布”菜单的打开和关闭进行动画处理，因此存在一些未知CSS3技巧来帮助提高性能。如果使用3D转换并且计算机具有3D转换，则将强制用户计算机使用硬件加速来使动画更流畅，更快。差异可能非常微妙，但是对于某些用户和机器而言，它将与众不同。这是代码：

/* Original Method */
#site-canvas {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.show-nav #site-canvas {
  -webkit-transform: translateX(300px);  
  transform: translateX(300px);  
}


/* Better Performing Method */
#site-canvas {
  -webkit-transform: translate3d(0);
  transform: translate3d(0);
}
.show-nav #site-canvas {
  -webkit-transform: translate3d(300px, 0, 0);  
  transform: translate3d(300px, 0, 0);  
}

Another trick you could do to force hardware acceleration is to use <i>translateZ</i>. Here's an example to best explain:

/* Original Method */
#site-canvas {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.show-nav #site-canvas {
  -webkit-transform: translateX(300px);  
  transform: translateX(300px);  
}


/* Better Performing Method */
#site-canvas {
  -webkit-transform: translateZ(0) translateX(0);
  transform: translateZ(0) translateX(0);
}
.show-nav #site-canvas {
  -webkit-transform: translateZ(0) translateX(300px);  
  transform: translateZ(0) translateX(300px);  
}

使用背面可见性 ( Use Backface-Visibility )

A lot of transforms and 3D transforms are still experimental in browsers. If you're getting weird flickering or DOM painting issues, try adding it to the #site-canvas.

许多转换和3D转换仍在浏览器中处于试验阶段。如果您遇到奇怪的闪烁或DOM绘画问题，请尝试将其添加到#site-canvas 。

#site-canvas {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

使退出键关闭导航 ( Make the escape key close the nav )

Depending on how big your Off Canvas Menu is, it might make sense to add this feature in for your users. It's good usability and makes a lot sense. You can add the following JavaScrip to close the nav when users hit the esc key.

根据“关闭画布”菜单的大小，可能有必要为用户添加此功能。它具有良好的可用性，并且很有意义。您可以添加以下JavaScrip以在用户按下esc键时关闭导航。

$(document).keyup(function(e) {
if (e.keyCode == 27) {
  if ($('#site-wrapper').hasClass('show-nav')) {
    // Assuming you used the function I made from the demo
    toggleNav();
  }
} 
});

启用手机快速点击 ( Enable Fast Click for Mobile )

An Off Canvas Menu works great on mobile, but most mobile devices have a lag when you click a link. This is frustrating for the user and a laggy experience overall. The easiest way is to use this FastClick JavaScript library. If you don't want to use another JavaScript library, here's a tutorial by Google on mobile fast click.

“关闭画布”菜单在移动设备上效果很好，但是单击链接后，大多数移动设备都会出现滞后现象。这对于用户来说是令人沮丧的，并且总体上是缓慢的体验。最简单的方法是使用此FastClick JavaScript库。如果您不想使用其他JavaScript库，请参阅Google的移动快速点击教程。

使用不同类型的过渡 ( Use Different Types of Transitions )

The CSS3 transition property is what makes the animation smooth. If you didn't include it, the #site-canvas would almost instantaneously be pushed over with no known animation of it happening. The transition property has a lot of cool features beyond just speeding it up and slowing it down. Here's some examples to try:

CSS3过渡属性使动画变得平滑。如果不包含它，则#site-canvas几乎会立即被推入，而不会发生已知动画。 transition属性除了加速和减速之外，还具有许多很酷的功能。这里有一些例子可以尝试：

/*
* Ease
* Default and very smooth transition.
*/
#site-canvas {
  -webkit-transition: 300ms ease all;
  transition: 300ms ease all;
}

/*
* Linear
* Similar to if you would animate with jQuery (without ease)
*/
#site-canvas {
  -webkit-transition: 300ms linear all;
  transition: 300ms linear all;
}

/*
* Ease-in
* Accelerates
*/
#site-canvas {
  -webkit-transition: 300ms ease-in all;
  transition: 300ms ease-in all;
}

/*
* Ease-out
* Decelerates
*/
#site-canvas {
  -webkit-transition: 300ms ease-out all;
  transition: 300ms ease-out all;
}

/*
* Ease-in-out
* Slow, fast, slow
*/
#site-canvas {
  -webkit-transition: 300ms ease-out all;
  transition: 300ms ease-out all;
}


/*==================================================
=            CUBIC - Custom Transitions            =
==================================================*/
/*
* Cubic
* Bounce
*/
#site-canvas {
  -webkit-transition: all 300ms cubic-bezier(0.32,1.25,0.375,1.15);
  transition: all 300ms cubic-bezier(0.32,1.25,0.375,1.15);
}

/*
* Cubic
* Snappy Acceleration
*/
#site-canvas {
  -webkit-transition: -webkit-transform .33s cubic-bezier(.694, .0482, .335, 1);
  transition: -webkit-transform .33s cubic-bezier(.694, .0482, .335, 1);
}

/*
* Cubic
* Out of Orbit
*/
#site-canvas {
  -webkit-transition: -webkit-transform .33s cubic-bezier(1,0,.61,.15);
  transition: -webkit-transform .33s cubic-bezier(1,0,.61,.15);
}

/*
* Cubic
* Fat kid down slide
*/
#site-canvas {
  -webkit-transition: -webkit-transform .33s cubic-bezier(.2,1,.47,0);
  transition: -webkit-transform .33s cubic-bezier(.2,1,.47,0);
}

使叠加变暗或单击画布关闭 ( Darken Overlay or close on clicking the canvas )

You can easily append this code to put a dark, 30% opacity or so overlay over the #site-canvas on open. You can even add a click event to the overlay to toggle the navigation off. This tutorial won't go over how to do that, but it's good practice to give the users as much usability as possible.

您可以轻松地附加此代码，以在打开的#site-canvas上放置30％左右的深色不透明度。您甚至可以将点击事件添加到叠加层以关闭导航。本教程将不介绍如何执行此操作，但是最好的做法是为用户提供尽可能多的可用性。

浏览器支持帮助 ( Browser Support Help )

It's important to support multiple browsers. Thankfully the use case for Off Canvas Menus are generally smart phones and tablets which come with fairly modern browsers; however, you should still try and support many devices and systems. The example above only works in Chrome, but there's many ways to extend support to other browsers. Here's a list of properties you'll need to cross-support:

支持多个浏览器很重要。值得庆幸的是，“关闭画布”菜单的用例通常是带有相当现代的浏览器的智能手机和平板电脑。但是，您仍应尝试并支持许多设备和系统。上面的示例仅适用于Chrome浏览器，但是有很多方法可以将支持扩展到其他浏览器。这是您需要交叉支持的属性的列表：

具有2D后备效果的3D翻译 ( 3D Translate with a 2D Fallback )

Using translate3d is well worth it in terms of performance and user experience. However, not all browsers support it. Here's how you can gracefully degrade the Transform for maximum browser support. Pretty straight-forward:

就性能和用户体验而言，使用translate3d非常值得。但是，并非所有浏览器都支持它。您可以通过以下方式优雅地降低Transform的功能，以最大程度地支持浏览器。很简单：

#site-canvas {
  -webkit-transform: translateX(0); 
  transform: translateX(0);
  -webkit-transform: translateX(0) translateZ(0); 
  transform: translateX(0) translateZ(0);
  -webkit-transform: translate3d(0, 0, 0); 
  transform: translate3d(0, 0, 0); 
} 
.show-nav #site-canvas { 
  -webkit-transform: translateX(300px); 
  transform: translateX(300px);
  -webkit-transform: translateX(300px) tranlateZ(0); 
  transform: translateX(300px) tranlateZ(0);
  -webkit-transform: translate3d(300px, 0, 0); 
  transform: translate3d(300px, 0, 0); 
}

浏览器前缀 ( Browser Prefixes )

I left these out of the example to keep things easy on the eye, but here's what an example would look like with maximum browser support.

我在示例中省略了这些内容，以使事情变得容易，但是在最大程度地支持浏览器的情况下，示例如下所示。

#site-canvas {
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);

  -moz-transform: translateZ(0) translateX(0);
  -ms-transform: translateZ(0) translateX(0);
  -o-transform: translateZ(0) translateX(0);
  -webkit-transform: translateZ(0) translateX(0);
  transform: translateZ(0) translateX(0);

  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);

  -moz-transition: 300ms ease all;
  -ms-transition: 300ms ease all;
  -o-transition: 300ms ease all;
  -webkit-transition: 300ms ease all;
  transition: 300ms ease all;

  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
} 

.show-nav #site-canvas { 
  -moz-transform: translateX(300px);
  -ms-transform: translateX(300px);
  -o-transform: translateX(300px);
  -webkit-transform: translateX(300px);
  transform: translateX(300px);

  -moz-transform: translateZ(0) translateX(300px);
  -ms-transform: translateZ(0) translateX(300px);
  -o-transform: translateZ(0) translateX(300px);
  -webkit-transform: translateZ(0) translateX(300px);
  transform: translateZ(0) translateX(300px);

  -moz-transform: translate3d(300px, 0, 0);
  -ms-transform: translate3d(300px, 0, 0);
  -o-transform: translate3d(300px, 0, 0);
  -webkit-transform: translate3d(300px, 0, 0);
  transform: translate3d(300px, 0, 0);
}

JavaScript后备 ( JavaScript Fallback )

As a last resort you, you could always implement a JavaScript fallback. For example:

作为最后的选择，您始终可以实现JavaScript后备。例如：

function toggleNav() { 
  if ($('#site-wrapper').hasClass('show-nav')) { 
    // Logic here if browser doesn't support/have CSS3 Transforms 
    $('#site-wrapper').css('margin-right', '0px'); 
    $('#site-wrapper').removeClass('show-nav'); 
  } else {
    // Logic here if browser doesn't support/have CSS3 Transforms 
    $('#site-wrapper').css('margin-right', '-300px'); 
    $('#site-wrapper').addClass('show-nav'); 
  }

  //$('#site-wrapper').toggleClass('show-nav'); 
}

结论 ( Conclusion )

Even though this tutorial only covered one style of Off Canvas Menu with multiple types of transitions, you can play around with it to make menus however you'd like. For example, resize the scotch.io site and look at how our Off Canvas Menu works. Another personal favorite to check out is SquareSpace and how they did their menu. The options really are limitless.

即使本教程仅介绍一种样式的“关闭画布菜单”具有多种过渡类型，您也可以随意使用它来制作菜单。例如，调整scotch.io网站的大小，然后查看“关闭画布”菜单的工作方式。另一个个人最喜欢退房的东西是SquareSpace及其菜单制作方式。选项确实是无限的。

I hope you enjoyed the tutorial and demos. Thanks for checking it out! I'm always looking for feedback, improvements, and suggestions.

我希望您喜欢本教程和演示。感谢检查出来！我一直在寻找反馈，改进和建议。