mobilebone
Version:
Bone main for mobile web APP with a sigle page mode by using HTML5 history API router.
45 lines (42 loc) • 1.96 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>Mobilebone.js API文档-data-form</title>
<link rel="stylesheet" href="../../src/mobilebone.css">
<link rel="stylesheet" href="../assets/docs.css">
</head>
<body>
<header id="header"></header>
<aside id="aside"></aside>
<div class="page out">
<div class="content">
<h2>data-form</h2>
<p>用在<code>page</code>元素上，表示当前页面过渡的动画类型。值为对应的类名，例如<code>"fade"</code>, <code>"flip"</code>等。</p>
<p>具体使用可参见项目<code>test/transition/index.html</code>.</p>
<h3>关于animte.css</h3>
<p>过渡效果测试页面<code>/test/transition/</code>中有个CSS文件，名为<code>animate.css</code>，是个很重要的过场效果插件。不过之前位置过于隐蔽，很多人都没注意。在v2.3.0+版本之后，以<code>mobilebone.animate.css</code>放在的<code>src</code>目录中。目前包含动画类别有：</p>
<ul>
<li>fade</li>
<li>pop</li>
<li>slide(默认有)</li>
<li>slidefade</li>
<li>slidedown</li>
<li>slideup</li>
<li>flip(父级需要类名<code>viewport-flip</code>)</li>
<li>turn(父级需要类名<code>viewport-turn)</code></li>
<li>flow</li>
</ul>
<p>在页面引入<code>mobilebone.animate.css</code>后，只要设置<code>Mobilebone.classAnimation</code>后者<code>data-form</code>为对应的动画关键字，如<code>pop</code>. 页面见的过场效果就会使<code>pop</code>效果，使用非常简单。</p>
</div>
</div>
<script src="../../src/mobilebone.js"></script>
<script>
Mobilebone.captureLink = false;
window.navKey = "data-form";
</script>
<script src="nav.js"></script>
<script src="../assets/docs.js"></script>
</body>
</html>