将 zurb motion-ui 集成到一个简单的 html、css javascript 项目中

Question

如何集成zurb motion-ui in a simple html, css javascript project. I would wish to use the animations but from the documentation没有关于如何将其包含在简单项目中的明确说明

Answer 1

如果您不熟悉 SASS，NPM/Bower 您可以从官方页面下载 Motion UI 初学者工具包 http://zurb.com/playground/motion-ui 真的很容易理解。

超级简单的例子可能看起来像这样：

包括CSSmotion-ui.min.css
包括 JS motion-ui.min.js
为onclick动画写一些简单的javascript

它有什么作用？

点击link(.js-button)图片(.js-image)会做旋转动画(spin-in)

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="motion-ui.min.css" />
    <title>Motion UI Super Simple Example</title>
</head>
<body>

    <a href="#" class="js-button">Click to animate!</a>
    <br /><br />
    <img src="http://satyr.io/200" class="js-image" />


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="motion-ui.min.js"></script>

    <script>
        var element = $('.js-image');           
        var button = $('.js-button');

        button.click(function() {
            MotionUI.animateIn(element, 'spin-in');
        });     
    </script>
</body>
</html>

将 zurb motion-ui 集成到一个简单的 html、css javascript 项目中

integrating zurb motion-ui in a simple html, css javascript project

javascript

css

zurb-foundation