CSS 过渡：如何“闪”入和退出课堂答案

【问题标题】：CSS Transitions: How to 'flash' in and out of a classCSS 过渡：如何“闪”入和退出课堂
【发布时间】：2018-06-29 21:30:34
【问题描述】：

当我添加一个类时，我试图让一个元素立即变为一种颜色，然后在它被删除时慢慢淡出。我已经通过 CSS 过渡实现了这一点，如下所示：

.base {
  background-color: #000000;
  transition: 1.5s background-color;
}

.base.extra {
  transition: 0s background-color;
  background-color: #00ff00;
}

这有效，但仅当我添加“额外”类然后将其作为单独的操作删除时...

$('#add').on(
  'click',
  function(e) {
    e.preventDefault();
    $('.base').addClass('extra');
  }
)

$('#remove').on(
  'click',
  function(e) {
    e.preventDefault();
    $('.base').removeClass('extra');
  }
)

$('#flash').on(
  'click',
  function(e) {
    e.preventDefault();
    $('.base').addClass('extra');
    $('.base').removeClass('extra');
  }
)

.base {
  width:300px;
  height: 60px;
  background-color: #000000;
  transition: 1.5s background-color;
}
.base.extra {
  transition: 0s background-color;
  background-color: #00ff00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='base'></div>
<a id=add>Add 'extra' class</a><br/>
<a id=remove>Remove 'extra' class</a><br/>
<a id=flash>Add then remove 'extra' class</a><br/>

如果您单击“添加...”，则该块变为绿色，请检查。

如果您单击“删除...”，该块会变黑，请检查。

如果您单击“添加然后删除...”，则不会发生任何变化！

我假设它在第一个实例中没有改变颜色，所以它从黑色渐变为黑色。

如何使第三个链接将其更改为绿色，然后立即开始使用 CSS 过渡淡化？

注意：我故意不为此使用 jQuery 动画，因为一次运行几十个动画会带来性能问题。

【问题讨论】：

你需要一种眨眼效果？
首先你知道jquey上的事件不正确吗？你有两次 #remove ？
@TemaniAfif 谢谢！我没有发现。

标签： css css-transitions

【解决方案1】：

第一，#remove 有两个事件。另一个应该是#flash。第二，它可以工作，但它太快了。设置超时（使用 JavaScript setTimeout()）200 毫秒（=0.2 秒）使效果可见。

$('#add').on(
  'click',
  function(e) {
    e.preventDefault();
    $('.base').addClass('extra');
  }
)

$('#remove').on(
  'click',
  function(e) {
    e.preventDefault();
    $('.base').removeClass('extra');
  }
)

$('#flash').on(
  'click',
  function(e) {
    e.preventDefault();
    $('.base').addClass('extra');
    setTimeout(function() {
      $('.base').removeClass('extra');
    }, 200);
  }
)

.base {
  width: 300px;
  height: 60px;
  background-color: #000000;
  transition: 1.5s background-color;
}

.base.extra {
  transition: 0s background-color;
  background-color: #00ff00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='base'></div>
<a id='add'>Add 'extra' class</a><br/>
<a id='remove'>Remove 'extra' class</a><br/>
<a id='flash'>Add then remove 'extra' class</a><br/>

【讨论】：

200 不是 2 秒，而是 200 毫秒
我最后用了 10 毫秒，但是很完美，谢谢！

【解决方案2】：

您可以以不同的方式执行此操作。这是一个带有伪元素的想法。

.base {
  width:300px;
  height: 60px;
  background-color: #000000;
  position:relative;
}
.base:before {
 content:"";
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 z-index:-1;
 background-color: #00ff00;
}
.base:hover::before {
  z-index:1;
  opacity:0;
  transition: 1.5s opacity;
}

&lt;div class='base'&gt;&lt;/div&gt;

添加/删除类的效果相同。您可以依靠transitionend 事件来移除该类：

$('.base').on(
  'click',
  function(e) {
    e.preventDefault();
    $(this).addClass('extra').on('transitionend', function () {
      $(this).removeClass('extra');
    });
  }
)

.base {
  width:300px;
  height: 60px;
  background-color: #000000;
  position:relative;
}
.base:before {
 content:"";
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 z-index:-1;
 background-color: #00ff00;
}
.base.extra::before {
  z-index:1;
  opacity:0;
  transition: 1.5s opacity;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='base'></div>

【讨论】：