代码之家 › 专栏 › 技术社区 › Paramone

CSS动画参考底图引导带条带表行

css html javascript

Paramone · 技术社区 · 6 年前

出于某种原因,看起来较暗的行与白色行重叠,因此动画(辉光)无法“穿过”它们。

我已经在snippet上重新创建了相同的代码,但是它没有重叠。在这种情况下,这个片段就是我想要的。。

$(document).ready(function () {

    $(".lblRetry").hover(function () {
        var grId = this.attributes.value.value;
        var grRow = document.getElementById(grId);

        grRow.classList.add("testAnimation");

    }, function () {
        removeClass(this);
    });
});


function removeClass(e) {
    var grId = e.attributes.value.value;
    var grRow = document.getElementById(grId);
    setTimeout(function () {
        grRow.classList.remove("testAnimation");
    }, 4000);
};

.testAnimation {
    -webkit-animation: frames linear 1s infinite alternate;
    animation: frames linear 1s infinite alternate;
    animation-iteration-count: 4;
}

@-webkit-keyframes frames {
    0% {
        outline: none;
        border-color: #9ecaed;
        box-shadow: 0px 0px 0px dodgerblue;
    }

    25% {
        outline: none;
        border-color: #9ecaed;
        box-shadow: 0px 0px 10px dodgerblue;
    }

    50% {
        outline: none;
        border-color: #9ecaed;
        box-shadow: 0px 0px 20px dodgerblue;
    }

    75% {
        outline: none;
        border-color: #9ecaed;
        box-shadow: 0px 0px 25px dodgerblue;
    }

    100% {
        outline: none;
        border-color: #9ecaed;
        box-shadow: 0px 0px 30px dodgerblue;
    }
}

<div class="container-fluid">
    <table class="table table-striped">
        <thead>
            <tr class="header">
                <th class="sortableTableHeader" style="white-space:nowrap; width:8em;" data-fieldname="ExecutionDate"><span class="link">Executed</span></th>
                <th class="sortableTableHeader" data-fieldname="Shippers" style="width:10em;white-space:nowrap;"><span class="link">Shipper</span></th>
                <th class="sortableTableHeader" data-fieldname="Retry" style="width:2em;white-space:nowrap;"></th>
                <th style="width:7em;">
                    Orders
                    <span class="glyphicon glyphicon-info-sign info" aria-hidden="true" data-html="true" data-toggle="tooltip" title="First number shows the amount of labels generated at first attempt. <br/> <br/> Numbers adding up to it in green means the amount of labels that have been created when a retry has been attempted.  <br/><br/> Numbers in red mean the amount of un-created labels (still in error state).  <br/><br/> Last number means the total amount of orders selected."></span>
                </th>
                <th style="width:14em;">Status</th>
            </tr>
        </thead>
        <tbody>
        <tr id="1">
           <td>
           Date
           </td>
           <td>
           DHL
           </td>
           <td >
           <span class="glyphicon glyphicon-repeat lblRetry" value="2" aria-hidden="true" data-html="true" data-toggle="tooltip" title="This label is a retry label. Originated from another group currently being highlighted."></span>
           </td>
           <td>
           16
           </td>
           <td>
           All good!
           </td>
           </tr>
           <tr id="2">
           <td>
           Date
           </td>
           <td>
           DHL
           </td>
           <td >
           <span class="glyphicon glyphicon-repeat lblRetry" value="1" aria-hidden="true" data-html="true" data-toggle="tooltip" title="This label is a retry label. Originated from another group currently being highlighted."></span>
           </td>
           <td>
           16
           </td>
           <td>
           All good!
           </td>
           </tr>
        </tbody>
    </table>
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

1 回复 | 直到 6 年前

Carol McKay 6 年前

更具体一点,比如:

.container-fluid table.table.table-striped.AdemTable .testAnimation {
    -webkit-animation: frames linear 1s infinite alternate;
    animation: frames linear 1s infinite alternate;
    animation-iteration-count: 4;
}