Question

我有一个小书签功能区图标，我在Android应用程序的WebView中使用。功能区完全是使用CSS创建的，并且在默认状态下，它是灰色的。

在某些情况下，我希望书签闪烁红色，然后慢慢淡化为自然的灰色。此处的行为非常类似于您单击指向SO答案的链接时 - 当您到达单击答案的页面时，答案背景会闪烁橙色，然后慢慢淡化为默认白色。这基本上就是我想用丝带颜色做的事情。

那么，最好的方法是什么？（没有JQuery，请 - 我更喜欢直接的javascript。）这是我的功能区CSS：

div.ribbonDisplay {
    position: absolute;
    width: 0;
    border-style: solid;
    border-color: #c7c7c7;
    border-bottom-color: transparent;
    height: 6px;
    top: 8px;
    left: 7px;
    border-width: 5px;
    border-bottom-width: 4px;
}

非常感谢！

Answer 1

可以通过以下代码更改来实现。

在id元素中添加div。
创建一个单独的red类来设置border-color。该课程将在短期内添加，然后删除。
添加以下JS代码以在load上添加该类，然后在几秒钟后删除（超时）。

＆＃13;

window.onload = function() { // add class on page load
  document.getElementById('ribbon').classList.add('red');
  setTimeout(removeHighlight, 2000); // call function to remove highlight after 2 seconds.
}

function removeHighlight() {
  document.getElementById('ribbon').classList.remove('red');
}

＆＃13;

div.ribbonDisplay {
  position: absolute;
  width: 0;
  border-style: solid;
  border-color: #c7c7c7;
  border-bottom-color: transparent;
  height: 6px;
  top: 8px;
  left: 7px;
  border-width: 5px;
  border-bottom-width: 4px;
  -webkit-transition: border-color 1s ease; /* added for the transition effect */
  -moz-transition: border-color 1s ease;
  transition: border-color 1s ease;
}
#ribbon.red { /* to make the selector more specific so that it over-ride initial setting */
  border-color: red;
  border-bottom-color: transparent;
}

＆＃13;

<div id='ribbon' class='ribbonDisplay'>Ribbon</div>

＆＃13;

注意： classList.add和classList.remove是HTML5 API的一部分，因此无法在IE＆lt; 8.请参阅此MDN Link以获取浏览器兼容性列表。

没有HTML5 API的JS：

＆＃13;

window.onload = function () {
    document.getElementById('ribbon').className += ' red';
    setTimeout(removeHighlight, 2000);
}

function removeHighlight() {
    var classes = document.getElementById('ribbon').className
    document.getElementById('ribbon').className = classes.replace(' red', ''); //replaces red in the class attribute with null/blank.
}

＆＃13;

div.ribbonDisplay {
  position: absolute;
  width: 0;
  border-style: solid;
  border-color: #c7c7c7;
  border-bottom-color: transparent;
  height: 6px;
  top: 8px;
  left: 7px;
  border-width: 5px;
  border-bottom-width: 4px;
  -webkit-transition: border-color 1s ease; /* added for the transition effect */
  -moz-transition: border-color 1s ease;
  transition: border-color 1s ease;
}
#ribbon.red { /* to make the selector more specific so that it over-ride initial setting */
  border-color: red;
  border-bottom-color: transparent;
}

＆＃13;

<div id='ribbon' class='ribbonDisplay'>Ribbon</div>

＆＃13;

Answer 2

我认为使用animation将是一种更简单的方法。

@keyframes flash {
  from { border-color: #f00; }
  to { border-color: #ccc }
}

div.ribbonDisplay {
  border-color: #f00; /* in case if you want any delay time */
  animation: flash 2s ease-out forwards;
}

您甚至可以为动画设置延迟时间：

div.ribbonDisplay {
  animation: flash 2s ease-out .5s forwards;
}

以编程方式应用固定持续时间的CSS转换

2 个答案: