类切换时开始动画

Question

我正在尝试创建一个蒙版，每次单击切换 CSS 类的按钮时都会从上到下滑动。我尝试使用 css 动画，但是当类被删除时，掩码不会滑动。我也尝试了 css 转换，它几乎可以工作。但是，当类被删除时，掩码会从下到上滑动，而不是按预期从上到下滑动。

如何改进我的代码 sn-p 以使每次按钮单击时掩码从上到下滑动？

var block = document.querySelectorAll('.block.first')[0],
  toggle = document.querySelectorAll('.toggle.anim')[0],
  blockSecond = document.querySelectorAll('.block.second')[0],
  toggleTrans = document.querySelectorAll('.toggle.trans')[0];

toggle.addEventListener('click', function(e) {
  e.preventDefault();

  if (block.classList.contains('mask')) {
    block.classList.remove('mask');
    console.log('remove class');
  } else {
    block.classList.add('mask');
    console.log('add class');
  }

});

toggleTrans.addEventListener('click', function(e) {
  e.preventDefault();
  
  if (blockSecond.classList.contains('mask')) {
    blockSecond.classList.remove('mask');
    console.log('remove class');
  } else {
    blockSecond.classList.add('mask');
    console.log('add class');
  }

});

.block {
  position: relative;
  width: 200px;
  height: 200px;
  background: #ccc;
  overflow: hidden;
}

.block span {
  visibility: hidden;
  transition: visibility 0s linear .3s;
}

.block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background: #999;
  transform: translate3d(0, -100%, 0);
  z-index: 5;
}

.block.mask span {
  visibility: visible;
}


/* USING ANIMATION */

.block.first.mask::before {
  animation: maskToggle 1s linear 0s forwards;
}

@keyframes maskToggle {
  0% {
    transform: translate3d(0, -100%, 0);
  }
  100% {
    transform: translate3d(0, 100%, 0);
  }
}


/* USING TRANSITION */

.block.second::before {
  transition: transform 1s;
}

.block.second.mask::before {
  transform: translate3d(0, 100%, 0);
}

<div class="block first">
  <span>HIDDEN CONTENT - - HIDDEN CONTENT - - HIDDEN CONTENT - - HIDDEN CONTENT</span>
</div>
<button class="toggle anim">Animation Toggle</button>


<div class="block second">
  <span>HIDDEN CONTENT - - HIDDEN CONTENT - - HIDDEN CONTENT - - HIDDEN CONTENT</span>
</div>
<button class="toggle trans">Transition Toggle</button>

Answer 1

你可以用 jQuery 做这样的事情：

$('.toggle').click(function() {
  $('.block').removeClass('man1');
  $('.block').addClass('man');
  var clicks = $(this).data('clicks');
  if (clicks) {
      $('.block').removeClass('man');
      $('.block').addClass('man1');
  } else {

  }
  $(this).data("clicks", !clicks);
});

.block {
  position: relative;
  width: 200px;
  height: 200px;
  background: #ccc;
  overflow: hidden;
}

.block span {
  visibility: hidden;
  transition: visibility 0s linear .3s;
}

.block::before {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 200px;
  height: 200px;
  background: #999;
  z-index: 5;
  transition: all 0.5s ease;
}

.block::after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 200px;
  height: 200px;
  background: #999;
  z-index: 5;
  transition: all 0.5s ease;
}

.block.man::before {
  animation: maskToggle 1s linear 0s forwards;
}

.block.man1::after {
  animation: maskToggle 1s linear 0s forwards;
}

.block.man span {
  visibility: visible;
}

@keyframes maskToggle {
  0% {
      top: -100%;
  }
  100% {
      top: 100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="block second">
  <span>HIDDEN CONTENT - - HIDDEN CONTENT - - HIDDEN CONTENT - - HIDDEN CONTENT</span>
</div>
<button class="toggle trans">Transition Toggle</button>

JSFiddle