Question

以下CSS动画未应用最后一条规则：display: none;。我做错了什么？

setTimeout(function () {
  $('.to-hide').addClass('hidden');
}, 2000);

 @-webkit-keyframes fade-out {
      0%   { opacity: 1; }
      99%  { opacity: 0; }
      100% { display: none; }
    }
    @-moz-keyframes fade-out {
      0%   { opacity: 1; }
      99%  { opacity: 0; }
      100% { display: none; }
    }
    @-o-keyframes fade-out {
      0%   { opacity: 1; }
      99%  { opacity: 0; }
      100% { display: none; }
    }
    @keyframes fade-out {
      0%   { opacity: 1; }
      99%  { opacity: 0; }
      100% { display: none; }
    }
    
div {
  float: left;
  width: 100%;
  height: 20px;
  clear: both;
  background-color: blue;
}

.to-hide {
  background-color: red;
}

.hidden {
  -webkit-animation-name: fade-out;
          -moz-animation-name:    fade-out;
          -o-animation-name:      fade-out;
          animation-name:         fade-out;
          -webkit-animation-duration: 0.8s;
          -moz-animation-duration:    0.8s;
          -o-animation-duration:      0.8s;
          animation-duration:         0.8s;
          -webkit-animation-timing-function: ease-in-out;
          -moz-animation-timing-function:    ease-in-out;
          -o-animation-timing-function:      ease-in-out;
          animation-timing-function:         ease-in-out;
          -webkit-animation-fill-mode: forwards;
          -moz-animation-fill-mode:    forwards;
          -o-animation-fill-mode:      forwards;
          animation-fill-mode:         forwards;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="to-hide"></div>
<div class="to-hide"></div>
<div class="to-hide"></div>
<div class="to-hide"></div>
<div class="to-hide"></div>
<div class="to-hide"></div>
<div></div>

Answer 1

由于您无法使用display: none进行过渡或动画，因此您可以通过动画div的高度来模拟它。

<强> HTML

<div class="to-hide"></div>
<div class="to-hide"></div>
<div class="to-hide"></div>
<div class="to-hide"></div>
<div class="to-hide"></div>
<div class="to-hide"></div>
<div></div>

<强> CSS

div {
   float: left;
   width: 100%;
   height: 20px;
   clear: both;
   background-color: blue;
}

.to-hide {
   background-color: red;
}

.hidden {
   animation: fade-out 0.8s ease-in-out forwards;
}

@keyframes fade-out {
   0% {
     opacity: 1;
   }
   99% {
     opacity: 0;
   }
   100% {
     height: 0;
   }
}

＆＃13;

setTimeout(function() {
  $('.to-hide').addClass('hidden');
}, 2000);

＆＃13;

div {
   float: left;
   width: 100%;
   height: 20px;
   clear: both;
   background-color: blue;
 }
 
 .to-hide {
   background-color: red;
 }
 
 .hidden {
   animation: fade-out 0.8s ease-in-out forwards;
 }
 
 @keyframes fade-out {
   0% {
     opacity: 1;
   }
   99% {
     opacity: 0;
   }
   100% {
     height: 0;
   }
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="to-hide"></div>
<div class="to-hide"></div>
<div class="to-hide"></div>
<div class="to-hide"></div>
<div class="to-hide"></div>
<div class="to-hide"></div>
<div></div>

＆＃13;

Answer 2

看起来你的动画从0％开始变为100％并重新开始。如果你希望它只运行一次而不是无限运行，这就像它正在做的那样，尝试添加：

animation-iteration-count: 1;

如果这不起作用，我还怀疑你不能将display:none;添加到css3关键帧，而是添加不透明度：0; 100％。

Answer 3

我想您想在动画结束时设置this.path以从显示列表中删除项目并释放他们占用的空间。

因此，您无法在关键帧动画中设置显示，您可以使用每个css动画最后触发的display: none事件，并在事件处理程序中设置animationend。

示例（js片段）：

display: none

假设你有一个额外的css类选择器：

setTimeout(function () {
  $('.to-hide').addClass('hidden');
}, 2000);

document.body.addEventListener('animationend', removeElement);
document.body.addEventListener('webkitAnimationEnd', removeElement);

function removeElement(event) {
  if (event.animationName === 'fade-out') {
    console.log(event.target);
    $(event.target).addClass('display-none');
  }
}

但是它添加了javascript并且不仅仅是css。

您可以使用.display-none { display: none; }属性来解决css问题。请参阅此SO question。

CSS关键帧未应用100％标记的最后一个规则集

3 个答案: