javascript - 立即淡出并使用 CSS3 过渡淡入

Question

我有问题。

我想立即淡出我的正方形（单击按钮后），然后在延迟的时间内慢慢淡入。

这是我的示例小提琴：

http://jsfiddle.net/qFYL7/6/

我改变了课程，但恐怕这不是正确的方法：

 my_square.className  = 'dim_fast';
 my_square.className = 'square';

感谢您提供的任何帮助！

Answer 1

纯 CSS3 解决方案怎么样？

首先，您需要确保按钮位于正方形之前。

<button id="bt1"> </button>
<div id="my_square" class="square"> </div>

这是因为 CSS 没有“前一个兄弟”选择器。

现在你必须使用:active按钮上的伪元素，直接隐藏正方形。

#bt1:active + .square
{

    -webkit-transition:opacity 0s;
       -moz-transition:opacity 0s;
         -o-transition:opacity 0s;    
            transition:opacity 0s;
    opacity:0;
}

当您单击按钮时，正方形将立即被隐藏。

现在在正方形上添加过渡。

.square
{

    -webkit-transition:opacity 2s;
       -moz-transition:opacity 2s;
         -o-transition:opacity 2s;
            transition:opacity 2s;
    opacity:1;
}

Square 将在 2 秒内淡入。

一探究竟

Answer 2

好吧，在您的函数中，您将类更改为dim_fast，然后立即返回square，它没有转换:)

所以，删除：

my_square.className = 'square';

或者至少附加第二类：

my_square.className = 'square dim_fast';

---

要淡出正方形，然后在一段时间后淡入，您可以使用setTimeout. 例子

Answer 3

I would use animation for this instead of transitions

Altered CSS (from your jsfiddle)

.square
{
    width:100px;
    height:100px;    
    background-color:blue;
    opacity:1;
}
.fade{
    animation: dim_fast_shine_slow 1s;
}
@keyframes dim_fast_shine_slow{
    99%{opacity:0;}
    100%{opacity:1}
}

Altered script

var my_square = document.getElementById('my_square');

function dim_fast_shine_slow()
{
    // remove class
    my_square.className = my_square.className.replace(' fade','');
    setTimeout(function(){
        // add class after 50 millisecons to allow the DOM to register the removal of the class
        my_square.className  += ' fade';
    },50);

  }

 document.getElementById('bt1').onclick = dim_fast_shine_slow;

Demo at http://jsfiddle.net/gaby/qFYL7/7/

Answer 4

它很简单：

function dim_fast_shine_slow() {
    my_square.classList.toggle("dim_fast");
}

在您的版本中，您有：

function dim_fast_shine_slow() {
    my_square.className  = 'dim_fast'; //changes class to dim_fast
    my_square.className = 'square'; // changes it back to square
}

在每次单击中，元素的类名最终都会变成“正方形”。

Answer 5

现在是 2018 年，这个解决方案适用于 edge、chrome、opera 和 firefox。虽然 caniuse 说 IE11 具有完整的关键帧支持，但在我的 IE11 中不起作用。

const fade = document.querySelector('.fade');
const cont = document.querySelector('.container');

document.body.addEventListener('click', ev => {
  if (ev.target.classList.contains('fade')) {
    cont.classList.add('fade-out-in');
  }
});

cont.addEventListener('animationend', ev => {
  cont.classList.remove('fade-out-in');
});

@keyframes fadeOutIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.container {
  width: 200px;
  height: 200px;
  margin-top: 10px;
  background: red;
}

.fade-out-in {
  animation: fadeOutIn 1s;
}

<button class="fade">Fade 1</button>
<button class="fade">Fade 2</button>
<button class="fade">Fade 3</button>

<div class="container"></div>

Answer 6

应该有一种不用 jQuery 的方法（我不知道）.. 但如果你决定使用 jQuery：

$(my_square).hide("fast").show("slow");