javascript - 淡入或淡出取决于事件类，淡入有效，淡出不

Question

这可能最好在 fiddle 中查看 here .

这是一个简单的作品集淡入/淡出幻灯片。显示的幻灯片具有“事件”类。它应该在下一张幻灯片淡入之前淡出。相反，它会立即消失。下一张幻灯片的淡入效果很好。

这是基本的 html 代码。

var x = document.getElementById("inner-portfolio-wrapper").childElementCount;
  var j = 1;
  var k;

  function clickMe() {
    if (x > 1) {
      if (j === x) {
        j = 1;
        k = x;
      } else {
        k = j;
        j++;
      }
      console.log("j = " + j);
      console.log("k = " + k);
      document.getElementById("portfolio-item-" + k).style.display = "none";
      document.getElementById("portfolio-item-" + j).style.display = "block";
      document.getElementById("portfolio-item-" + j).classList.add("active");
      document.getElementById("portfolio-item-" + k).classList.remove("active");
    }
  }

#inner-portfolio-wrapper {
  position: relative;
  width: 150px;
  height: 50px;
}

.portfolio-item {
  display: none;
  animation: fadeIn 2s;
}

.portfolio-item .active {
  display: block;
  animation: fadeOut 2s;
}

.portfolio-item:first-child {
  display: block;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<div id="inner-portfolio-wrapper">
  <div id="portfolio-item-1" class="portfolio-item">
    <h2>
      ITEM 1
    </h2>
  </div>
  <div id="portfolio-item-2" class="portfolio-item">
    <h2>
      ITEM 2
    </h2>
  </div>
  <div id="portfolio-item-3" class="portfolio-item">
    <h2>
      ITEM 3
    </h2>
  </div>
</div>
<button type="button" onclick="clickMe()">
Click Me
</button>

  

如果您能帮助淡出工作，我们将不胜感激。其他一切工作正常。

Answer 1

目前，fadeOut 动画不起作用，因为单击按钮会立即从元素中删除 .active 并且它会获得样式 display: none.

要获得所需的效果，onClick 函数唯一要做的就是触发 fadeOut 动画。所有接下来的 Action 都必须作为 animationEnd 事件的回调来调用。

还需要在样式上做一些改动:

.portfolio-item {
   display: none;
}

.portfolio-item.active {
   display: block;
   animation: fadeIn 2s;
}

.portfolio-item.active.out {
   display: block;
   animation: fadeOut 2s;
}

最后，它起作用了:

//detect the supported event property name and assign it to variable
// Function from David Walsh: http://davidwalsh.name/css-animation-callback
function whichAnimationEvent() {
  var t,
    el = document.createElement("fakeelement");

  var animations = {
    "animation": "animationend",
    "OAnimation": "oAnimationEnd",
    "MozAnimation": "animationend",
    "WebkitAnimation": "webkitAnimationEnd"
  }

  for (t in animations) {
    if (el.style[t] !== undefined) {
      return animations[t];
    }
  }
}

var animationEvent = whichAnimationEvent();
//Declare global variables
var total = document.getElementById("inner-portfolio-wrapper").childElementCount;
var currentNum = 1
var nextNum;
//Get all portfolio items add add them an event listener
var items = document.getElementById("inner-portfolio-wrapper").children
for (var i = 0; i < items.length; i++) {
  items[i].addEventListener(animationEvent, function(e) {
    if (e.animationName === 'fadeOut') {
      this.classList.toggle('out')
      this.classList.toggle('active');
      document.getElementById("portfolio-item-" + nextNum).classList.toggle('active')
      currentNum = nextNum
    }
  })
}
//When page loaded make first porfolio item active
items[0].classList.add("active");

function clickMe() {
  if (total > 1) {
    var currentElement = document.getElementById("portfolio-item-" + currentNum);
    nextNum = (currentNum === total) ? 1 : currentNum + 1
    currentElement.classList.toggle('out')
  }
}

#inner-portfolio-wrapper {
  position: relative;
  width: 150px;
  height: 50px;
}

.portfolio-item {
  display: none;
}

.portfolio-item.active {
  display: block;
  animation: fadeIn 2s;
}

.portfolio-item.active.out {
  display: block;
  animation: fadeOut 2s;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<div id="inner-portfolio-wrapper">
  <div id="portfolio-item-1" class="portfolio-item">
    <h2>
      ITEM 1
    </h2>
  </div>
  <div id="portfolio-item-2" class="portfolio-item">
    <h2>
      ITEM 2
    </h2>
  </div>
  <div id="portfolio-item-3" class="portfolio-item">
    <h2>
      ITEM 3
    </h2>
  </div>
</div>
<button type="button" onclick="clickMe()">
Click Me
</button>