Question

最好在小提琴here中查看。

这是投资组合的简单淡入/淡出幻灯片演示。所显示的幻灯片具有“活动”类。它应该在下一张幻灯片淡入之前淡出。相反，它会立即消失。下一张幻灯片的淡入效果很好。

这是基本的html代码。

asc\OM

$OM = new \OM(...);

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

任何帮助淡出工作的帮助将不胜感激。其他一切都很好。

Answer 1

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

要获得理想的效果，您的onClick函数唯一要做的就是触发fadeOut动画。所有后续操作都必须称为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>

淡入或淡出取决于活动班级，淡入作品，淡出不

1 个答案: