Question

我有问题。

我希望立即淡出我的方格（点击一个按钮后），然后在延迟的时间内慢慢淡出它。

这是我的例子：

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

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

感谢您提供任何帮助！

Answer 1

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

所以，删除：

my_square.className = 'square';

或者至少追加第二课：

my_square.className = 'square dim_fast';

要淡出广场，然后在一段时间后淡入，您可以使用setTimeout。 Example

Answer 2

关于纯粹的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;
}

广场将在2秒后淡入。

CHECK IT OUT

Answer 3

我会使用动画代替过渡

改变CSS（来自你的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}
}

修改脚本

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;

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年和this solution适用于edge，chrome，opera和firefox。虽然可以说IE11具有完整的关键帧支持，但是我的IE11中是否有效。

＆＃13;

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');
});

＆＃13;

@keyframes fadeOutIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.container {
  width: 200px;
  height: 200px;
  margin-top: 10px;
  background: red;
}

.fade-out-in {
  animation: fadeOutIn 1s;
}

＆＃13;

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

＆＃13;

Answer 6

应该有一种方法可以在没有jQuery（我不知道）的情况下这样做..但是如果你决定使用jQuery：

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

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

6 个答案:

关于纯粹的CSS3解决方案如何？