Lumx 动画不工作答案

【问题标题】：Lumx animation not workingLumx 动画不工作
【发布时间】：2016-05-16 23:46:36
【问题描述】：

我正在使用 Django、angularJS 和 lumx 创建网站。我对这个框架很陌生，我正在尝试让基本的 lumx 功能正常工作。我使用指令http://ui.lumapps.com/getting-started/installation（使用“bower install lumx”）安装了 lumx。 Django 设置为正确处理静态文件。

我有我想要测试的 base.html 文件（应该只显示一个下拉框）：

{% load staticfiles %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="{% static 'browse/js/script.js' %}"></script>
    <link rel="stylesheet" href="{% static 'browse/bower_components/lumx/dist/lumx.css' %}">

    <script src="{% static 'browse/bower_components/jquery/dist/jquery.js' %}"></script>
    <script src="{% static 'browse/bower_components/velocity/velocity.js' %}"></script>
    <script src="{% static 'browse/bower_components/moment/min/moment-with-locales.js' %}"></script>
    <script src="{% static 'browse/bower_components/angular/angular.js' %}"></script>
    <script src="{% static 'browse/bower_components/lumx/dist/lumx.js' %}"></script>

</head>
<body>

    <lx-dropdown over-toggle="true">
        <button class="btn btn--m btn--black btn--flat" lx-ripple lx-dropdown-toggle>
            Dropdown toggle
        </button>

        <lx-dropdown-menu>
            <ul>
            <li><a class="dropdown-link" ng-click="dropdownAlert()">Notification</a></li>
            <li><a class="dropdown-link">Another action</a></li>
            <li><a class="dropdown-link">Another action</a></li>
            <li><a class="dropdown-link">Another action</a></li>
            <li><a class="dropdown-link">Something else here</a></li>
            <li class="dropdown-divider"></li>
            <li><span class="dropdown-link dropdown-link--is-header">Header</span></li>
            <li><a class="dropdown-link">Separated link</a></li>
            </ul>
        </lx-dropdown-menu>
    </lx-dropdown>
</body>

但是动画不起作用，我不确定是什么问题。 lumx 动画都不起作用（如按钮波纹），但我可以调用它们拥有的图标。服务器日志显示我所有的 css 和 js 文件都被调用了。

【问题讨论】：

你是在本地运行吗？你能打开一个网页检查器来检查你加载这个页面时是否有任何错误吗？
@djq 我像往常一样使用“python manage.py runserer”在本地运行它。 web-inspector 现在在文件中显示错误，找到了 JS 文件，但我没有使用它们。
从这里很难说这是怎么回事。我建议注释掉所有库，并一个一个地加载每个库，并使用console.log() 在浏览器中输出一些内容。例如，它可能是时间问题（访问页面时是否加载了库？）或许多其他问题。

标签： javascript css angularjs django lumx

【解决方案1】：

我认为这是因为您没有正确初始化 Angular。您需要：

使用ngApp 指令声明您的应用
将lumx 声明为您的应用程序的依赖项（也许您在script.js 中做过？）
确保在加载库后调用angular。现在你的script.js 在加载所有库之前。

所以你的头部的固定版本可能是这样的：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="{% static 'browse/bower_components/lumx/dist/lumx.css' %}">

    <script src="{% static 'browse/bower_components/jquery/dist/jquery.js' %}"></script>
    <script src="{% static 'browse/bower_components/velocity/velocity.js' %}"></script>
    <script src="{% static 'browse/bower_components/moment/min/moment-with-locales.js' %}"></script>
    <script src="{% static 'browse/bower_components/angular/angular.js' %}"></script>
    <script src="{% static 'browse/bower_components/lumx/dist/lumx.js' %}"></script>
    <script src="{% static 'browse/js/script.js' %}"></script>

</head>

script.js 中有这样的内容：

angular.module('myApp', ['lumx']);

【讨论】：

这解释了很多，我确实有 angular.module('myApp', ['lumx']);贴花但我当时并不完全了解如何使用“ng-app”。谢谢！