sass / css - 移除 class 时反转动画

Question

我在 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;
}

这可以使不透明度变淡，但在 class 被移除时无法使不透明度变淡。我尝试添加 @include animation(fadeIn .5s);到 element.active 但这只会让两端的事情变得棘手。

有人知道如何完成这个吗？

Answer 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>

sass / css - 移除 class 时反转动画

sass / css - reverse animation when a class is removed

css

sass

css-animations

compass-sass