sass / css - 删除类时的反向动画答案

【问题标题】：sass / css - reverse animation when a class is removedsass / css - 删除类时的反向动画
【发布时间】：2015-03-26 02:54:16
【问题描述】：

我在 css / sass 中有以下设置：

@mixin animation ($stuff ) {
    -webkit-animation: $stuff;
    -moz-animation: $stuff;
    -ms-animation: $stuff;
    animation: $stuff;
}

@include keyframes (fadeIn) {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@include keyframes (fadeOut) {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.element {
  display: none;
  opacity: 0;
  @include animation(fadeIn .5s);
}

.element.active {
  display: block;
  opacity: 1;
}

这可以淡化不透明度，但在删除类时无法淡化不透明度。我尝试添加 @include animation(fadeIn .5s);到 element.active ，但它只是让两端的事情变得很糟糕。

有人知道怎么做吗？

【问题讨论】：

标签： css sass compass-sass css-animations

【解决方案1】：

为什么不简单地使用transition 而不是animation？在.element 上设置opacity: 0，在.active 上设置opacity: 1 并在.element 上设置transition: opacity .5s。

关于移除的显示部分，需要利用transitionend事件，然后切换到display: none。

另外，您不需要-ms-animation。 IE10 支持不带前缀的动画和过渡，而 IE9 则完全不支持。

var toggleButton = document.querySelector('button'), 
    elem = document.querySelector('.element');

toggleButton.addEventListener('click', function(){
  if(!elem.classList.contains('display')) {
    elem.classList.add('display'); 
  }
  
  setTimeout(function() {
    elem.classList.toggle('alpha');
  }, 150);
}, false);

elem.addEventListener('transitionend', function(){
  if(!elem.classList.contains('alpha')) {
    elem.classList.remove('display');
  }
}, false);

.element {
  display: none;
  opacity: 0;
  transition: opacity .5s
}

.alpha { opacity: 1; }

.display { display: block; }

<div class='element'>boo</div>
<button>toggle</button>

【讨论】：