Question

我正在尝试创建一个警报，当单击按钮时我的表闪烁。我可以使没有应用css的行像这样闪现：http://imgur.com/hWxlMAY但是应用了css的行似乎没有改变颜色。

这是我的html文件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">

        <!--load my css-->
        <link rel="stylesheet" type="text/css" href="alarm.css" />
        <!-- load Dojo -->
        <script>dojoConfig = {parseOnLoad: true}</script>
        <script src="dojo/dojo.js" data-dojo-config="async: true"></script>
        <!--load my js file-->
        <script> require(['myModule.js']); </script>

        <title>alarm test</title>
    </head>

    <body>
        <h1 id="greeting">Alarm</h1>
        <!--create table-->
        <table data-dojo-type="dojox.grid.DataGrid" id="tableContainer">
            <thead>
                <tr>
                    <!--Table headers-->
                    <th field="col1">Company</th>
                    <th field="col2">Contact</th>
                    <th field="col3">Country</th>
                </tr>
                <tr>
                    <td>Alfreds Futterkiste</td>
                    <td>Maria Anders</td>
                    <td>Germany</td>
                </tr>
                <tr>
                    <td>Centro comercial Moctezuma</td>
                    <td>Francisco Chang</td>
                    <td>Mexico</td>
                </tr>
            </thead>
        </table>

        <button id="alarm" type="button">Alarm</button>
        <button id="stopAlarm" type="button">Stop Alarm</button>
    </body>
</html>

这是我的按钮点击事件处理程序js代码：

require(["dojo/dom-style", "dojo/dom", "dojo/on", "dojo/dom-class", "dojo/domReady!"],
function(style, dom, on, domClass){
    on(dom.byId("alarm"), "click", function(){
          domClass.add(dom.byId("tableContainer"), "blink")
  });
    on(dom.byId("stopAlarm"), "click", function(){
          domClass.remove(dom.byId("tableContainer"), "blink")
      });
});

这是我的css文件：

table, th, td {
    border: 1px solid black;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

.blink {
    animation:blink 300ms infinite alternate;
}


@keyframes blink {
    from { background-color: white; }
    to { background-color: red; }
};

Answer 1

这是一个CSS问题，而不是道场问题。在声明blink css类时需要更具体，否则为tr元素定义的样式将优先。你可以使用这样的css定义：

.blink tr {
    animation:blink 300ms infinite alternate;
}

Dojo工具包 - 如何使用函数覆盖css？

1 个答案: