Lumx 动画不工作

Question

我正在使用 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>

但是动画不工作，我不确定哪里出了问题。 None 的 lumx 动画作品（如按钮波纹），但我能够调用他们拥有的图标。服务器日志显示我的所有 css 和 js 文件都被调用了。

Answer 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']);

Lumx 动画不工作

Lumx animation not working

javascript

css

django

angularjs

lumx