Html 颜色的“闪光”,使用纯​​ css 过渡

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16791851/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:49:34  来源:igfitidea点击:

A "flash" of color, using pure css transitions

htmlcss

提问by zmanc

I am trying to give users a "flash" of color when there is a click event. I can get the color to appear in a pleasing fashion using a transition, however I want the color to disappear after .5s, without removing the "active" class. One requirement though is that I cannot use jQuery animations and this must be done in CSS.

当有点击事件时,我试图给用户一个“闪光”的颜色。我可以使用过渡让颜色以令人愉悦的方式出现,但是我希望颜色在 0.5 秒后消失,而不删除“活动”类。但一个要求是我不能使用 jQuery 动画,这必须在 CSS 中完成。

Below is the css I am using currently.

下面是我目前使用的 css。

.active{
  background-color: yellow;
  -webkit-transition: background-color .5s linear;
  transition: background-color .5s linear;
}

I tried specifying a second value however I do not think this is valid markup as it does not work.

我尝试指定第二个值,但是我认为这不是有效的标记,因为它不起作用。

.active{
  background-color: yellow;
  -webkit-transition: background-color .5s linear, background-color:transparent .5s linear;
  transition: background-color .5s linear, background-color:transparent .5s linear;
}

http://jsbin.com/itivum/1/edit

http://jsbin.com/itivum/1/edit

回答by Rohith

I think this is what you are looking for. The sample is not exact.

我想这就是你要找的。样本不准确。

$("#go").click(function() {
    $("#box").removeClass("demo");
    setTimeout(function() {
        $("#box").addClass("demo");
    }, 1);
});
.container {position: relative;}

#box {
    height: 100px; 
    width: 100px; 
    background-color: #777;
    position: absolute;
    left: 5px;
    top: 5px;
    opacity: 0;
}

@-webkit-keyframes demo {
    0% {
        background-color: Yellow;
        opacity:1;
    }
    22% {
        background-color: Yellow;
    }
    77% {
        background-color: Red;
    }
    100% {
        background-color: #777;
    }
}
    
.demo {
    -webkit-animation-name: demo;
    -webkit-animation-duration: 900ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
}    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button id="go">Go</button>
<div class="container">
    <div id="box"></div>
</div>

Hope you will get the solution you are looking for from this.

希望您能从中得到您正在寻找的解决方案。

EDIT :

编辑 :

I have edited your JS Bin.

This will be what you are exactly looking for

http://jsbin.com/imonab/1/edit

我已经编辑了你的 JS Bin。

这将是您正在寻找的

http://jsbin.com/imonab/1/edit

回答by PointZeroTwo

I came up with the following based on my own needs. I wanted a flash of color to confirm a user action. The text flashes once when you click on it. It does use jquery to set the class, but not for the animation.

我根据自己的需要提出了以下建议。我想要一个闪光的颜色来确认用户操作。单击文本时,文本会闪烁一次。它确实使用 jquery 来设置类,但不是用于动画。

Html:

网址:

<span style="background:lightgray" id="id">Click to flash</span>

Js:

JS:

$('#id').click(function() {
    $('#id').addClass('flash');
    setTimeout(function() {
          $('#id').removeClass('flash');
    }, 500);
});

Css:

css:

.flash {
    -webkit-animation-name: flash-animation;
    -webkit-animation-duration: 0.3s;

    animation-name: flash-animation;
    animation-duration: 0.3s;
}

@-webkit-keyframes flash-animation {  
    from { background: yellow; }
    to   { background: default; }
}

@keyframes flash-animation {  
    from { background: yellow; }
    to   { background: default; }
}

See http://jsfiddle.net/umz8t/3597/

http://jsfiddle.net/umz8t/3597/

回答by Ryan

Impressed by Rohith's answer, here is my own JSFiddle demo(with added functionality)

Rohith 的回答给我留下了深刻的印象,这是我自己的 JSFiddle 演示(具有附加功能)

The main part is the CSS (or as I prefer, SCSS):

主要部分是 CSS(或者我更喜欢的是 SCSS):

@-webkit-keyframes quickFlash {
  0% {
    background-color: yellow;
    opacity: 1;
  }
  100% {
    background-color: inherit;
  }
}

.quickFlash {
  //https://stackoverflow.com/questions/16791851/a-flash-of-color-using-pure-css-transitions
  -webkit-animation-name: quickFlash;
  -webkit-animation-duration: 1900ms;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -moz-animation-name: quickFlash;
  -moz-animation-duration: 1900ms;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease;
}

And I also found it useful to be able to have the class remove itself at the end of the animation (so that I could later add it again if I wanted to see the animations again):

而且我还发现能够让类在动画结束时自行删除是很有用的(这样如果我想再次看到动画,我以后可以再次添加它):

function flashYellow(element) {
  element
    .addClass("quickFlash")
    .on(
      "webkitAnimationEnd oanimationend msAnimationEnd animationend",
      function() {
        console.log("animationend");
        $(this)
          .delay(500)// Wait for milliseconds.
          .queue(function() {            
            console.log("end of delay");
            $(this)
              .removeClass("quickFlash")
              .dequeue();
          });
      }
    );
}