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

这可以淡化不透明度，但在删除类时无法淡化不透明度。我尝试添加@include动画（fadeIn .5s）;对于element.active，但它只是让两端都搞砸了。

任何人都知道如何做到这一点？

Answer 1

为什么不简单地使用transition代替animation？ opacity: 0上的.element，opacity: 1上的.active和transition: opacity .5s上的.element。

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

另外，您不需要-ms-animation。 IE10支持动画和转换，而IE9根本不支持动画和转换。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: