html 使用translate3d for mobile进行侧导航滑入和滑出
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 使用translate3d for mobile进行侧导航滑入和滑出相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<title>SideNav</title>
<style>
#sidenav-right { position: absolute; z-index: -1; right: -300px; padding-top: 70px; }
.canvaswrapper { overflow: hidden; position: relative; }
body.open-right #sidenav-right,
body.open-right header,
body.open-right .canvas { display: block; z-index: 9;
-moz-transform: translate3d(-300px, 0, 0);
-webkit-transform: translate3d(-300px, 0, 0);
-o-transform: translate3d(-300px, 0, 0);
-ms-transform: translate3d(-300px, 0, 0);
transform: translate3d(-300px, 0, 0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
body #sidenav-right,
body .canvas { display: block;
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
</style>
</head>
<body>
<div class="canvaswrapper"><!-- canvaswrapper WRAPS WHOLE DOC -->
<div class="sticky shadow">
<header>
<div class="row">
<div class="grid_12">
This is the header
<p id="show-right">click me</p>
</div>
</div>
</header>
<!-- sidenav-right IS THE HIDDEN RIGHT NAV -->
<nav class="navigation" id="sidenav-right">
This is the right nav
</nav>
<!-- sidenav-right IS THE HIDDEN RIGHT NAV -->
</div>
<!-- canvas WRAPS MAIN CONTENT-->
<div class="canvas">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, sapiente, numquam optio odio recusandae blanditiis odit officiis aliquid veniam autem iste enim provident accusantium pariatur repellendus fugiat excepturi eum molestias dicta nobis ipsum perferendis eius quo quibusdam incidunt. Suscipit, ea, iure, sed, corporis deleniti maiores qui beatae dolorum aliquam est placeat molestiae sapiente quod blanditiis dolorem aspernatur perferendis impedit optio dolor vitae cum tempora ex at illum quis! Dolor, deserunt error aliquam ex inventore ipsam consequuntur. Incidunt, odit excepturi vero neque molestiae totam nostrum animi facere temporibus aperiam odio illo eum laboriosam eius sit dignissimos labore repellendus quia reiciendis repellat ipsa aliquam aliquid nemo distinctio quibusdam porro rerum quasi inventore ipsum consequatur. Non, ea, ipsum, voluptates qui officiis eveniet consequuntur vitae maxime iusto voluptatem provident laudantium modi fugiat quam repellendus distinctio ratione dolorum quasi laborum asperiores molestias debitis nulla voluptatum accusamus est excepturi exercitationem dolore nesciunt mollitia neque ut quas dignissimos ducimus tempora quisquam nobis nostrum! Tempore, assumenda, unde, laborum, soluta architecto enim fugiat quibusdam corporis veritatis ab debitis consectetur at accusamus harum labore mollitia recusandae nihil neque voluptatum nulla ducimus exercitationem deserunt doloremque cupiditate quos eligendi illo hic culpa repellat delectus pariatur sint quae natus reiciendis non quam aspernatur suscipit voluptas ipsam doloribus error ea officia animi accusantium quas dolor! Ut, saepe, veniam, ipsum, excepturi doloribus quo quaerat harum labore officia blanditiis praesentium maxime placeat odit suscipit pariatur autem fuga nobis ipsa ea voluptates molestiae velit porro. Minima, eligendi optio qui reprehenderit maxime esse consequatur illo facilis necessitatibus cupiditate accusamus ducimus delectus sequi explicabo ipsam assumenda excepturi distinctio aliquam dolorum tenetur perspiciatis possimus totam nisi enim dignissimos id similique doloribus odio eaque atque vitae laborum error suscipit reiciendis dolor magnam natus. Harum, unde, placeat, quisquam, eos alias provident deserunt possimus sunt ipsa ducimus quos libero quam. Quis, nam, minima, nulla eaque illo nostrum ipsum libero aperiam molestias quod numquam aspernatur eius deleniti ex inventore! Maxime, quam, rerum amet eos et porro vitae assumenda? Iusto, placeat facilis asperiores rerum soluta sequi alias iste facere doloremque eos repellat illum magnam modi voluptate incidunt fugiat veritatis et excepturi at quibusdam. Libero, laborum, commodi, magnam mollitia eaque tempora id accusamus vitae dicta repudiandae natus provident neque asperiores odit dignissimos delectus nostrum quaerat dolores accusantium sit rem nemo quo ex facilis maiores ratione ipsam eligendi. Beatae, ipsa, recusandae, in blanditiis eveniet totam facilis rerum optio eos rem voluptas voluptates porro ipsum nulla fugiat harum sit ut dicta dignissimos dolores quibusdam excepturi libero velit sint eligendi aspernatur non id veritatis iste iure nam vitae quas ea ad quos dolorum labore. Laboriosam, debitis a tempora! Tempore, rem, voluptatibus minus similique fugit unde possimus praesentium eum. Deleniti, quam vero explicabo reiciendis distinctio optio hic consequuntur quidem maiores ipsam dolor laborum dignissimos debitis tempore animi omnis alias ea numquam cupiditate aliquam perferendis perspiciatis praesentium esse! Unde, dicta iste nemo doloribus necessitatibus eius autem eligendi ipsa impedit quae. Aperiam, aliquam, sunt sequi earum fugit corporis reiciendis minima distinctio odio nobis ad explicabo ex dolorem. Ex, ad, repudiandae, libero neque explicabo officiis velit maxime natus blanditiis maiores inventore quibusdam sed doloremque veritatis voluptatum totam possimus ducimus nulla fugit quae ipsa excepturi beatae mollitia hic quisquam nemo officia sint at commodi nobis. Delectus, fugiat optio deleniti alias officia iusto aliquam harum perspiciatis commodi a quia corporis rem veritatis. Excepturi, quas blanditiis tenetur tempora repudiandae itaque consectetur sit necessitatibus corrupti neque. Aut, nostrum, fugiat sequi fugit ducimus sunt aspernatur voluptates quaerat illo quam eius ratione consectetur doloremque dolorem et recusandae asperiores. Quaerat, debitis ad veniam vero ab vel ex temporibus quod molestias reiciendis! Optio, reiciendis, voluptate tempore assumenda ut nulla ad sed quasi doloribus minima. Perspiciatis unde eius ad qui! Qui, enim, beatae, quae itaque ipsum rerum vitae harum accusamus nulla ex quasi sit tempora recusandae animi placeat expedita illo nihil repellat ab delectus totam dolores similique quaerat velit necessitatibus obcaecati sequi quidem? Culpa, nam quia eaque obcaecati veniam sint saepe fugiat odit a itaque deserunt tenetur temporibus tempora esse laborum fugit officiis. Corrupti, quas, accusantium, dolore doloribus dignissimos aspernatur ut saepe commodi suscipit dolores pariatur recusandae maxime quae vero illum odio illo corporis. Odio, at, quisquam reiciendis qui ab quaerat eveniet provident voluptatem sint architecto voluptate cupiditate perspiciatis totam dicta distinctio sed non mollitia ratione quidem saepe id ipsa consequuntur facilis voluptatibus ut labore accusamus a atque corporis rem laborum officiis ipsum soluta autem explicabo eaque fugit voluptas beatae aliquid est! Natus, mollitia nostrum dolores voluptatibus. Quos, eius, necessitatibus, similique quae eveniet alias labore doloremque pariatur recusandae ducimus molestiae blanditiis doloribus nihil veritatis reiciendis numquam rem officia vitae laudantium minima cupiditate molestias maiores accusamus. Cumque, necessitatibus, quaerat, id ea ullam magni aliquid vitae odit quibusdam officiis earum commodi accusamus facilis eligendi rerum reprehenderit mollitia. Beatae, eum dolor vitae molestias dolore quae labore deleniti fugiat aspernatur eos? Veniam, mollitia, minus asperiores nisi ad blanditiis. Ad, error, id, iusto repudiandae repellendus facilis sed non in unde doloribus nulla consectetur odit adipisci ut eum dignissimos maiores veniam eius ipsum quos atque blanditiis nam possimus! Reprehenderit, voluptas, ea, quisquam dolorum praesentium quia iure saepe a ab enim quos ad incidunt neque recusandae delectus ipsam omnis quo molestiae corrupti odio. Error, at, rerum, totam itaque et ratione magnam enim ducimus perferendis alias aperiam dolorum id ex nesciunt sit est aspernatur corrupti consequatur. Minus, similique, hic aspernatur corporis voluptatem atque consequatur accusantium! Ullam, animi, temporibus voluptas officiis molestiae tempore odit delectus nihil perspiciatis doloremque veniam ipsam maxime quo beatae consequatur optio placeat reprehenderit ipsa similique nobis explicabo natus nostrum aperiam velit recusandae ducimus in exercitationem esse possimus corporis assumenda consequuntur numquam perferendis. Dolorum quisquam libero ipsum inventore saepe soluta voluptate recusandae magni quibusdam voluptas. Inventore, odio, quia dignissimos itaque quaerat rem quod modi aperiam debitis illo iste blanditiis consectetur. Asperiores, quidem, neque, expedita incidunt beatae placeat reprehenderit fuga animi corrupti accusamus ipsa optio minus ullam quisquam porro commodi sit illo? Molestias, aliquam esse blanditiis architecto magni atque illum nesciunt corporis ipsum quasi tenetur veritatis similique totam in fuga nobis suscipit eligendi facere voluptates ipsam. Quaerat, recusandae, mollitia!
</div>
<!-- canvas WRAPS MAIN CONTENT-->
</div><!-- canvaswrapper WRAPS WHOLE DOC -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$("#show-right").on("click", function() {
$(this).toggleClass("active");
$("body").toggleClass("open-right");
browserUA = navigator.userAgent.toLowerCase();
});
</script>
</body>以上是关于html 使用translate3d for mobile进行侧导航滑入和滑出的主要内容，如果未能解决你的问题，请参考以下文章
Translate3d 不会在 Safari 中移动嵌入元素（仅限 Windows）
css CSS3，动画：使用translate3d强制WebKit中的硬件加速