Question

我使用transform：在一些盒子上翻译。当我按下一个按钮时，它假设向下滑动到最后一个向上滑动的盒子的下方。这样可以正常工作，但是当我在外面滑动它时，它只适用于滑动另一个方向的那个（最后一个项目），其他方式就会消失。

.ditales {
  width: 100%;
  height: 100%;
  transition: transform 2s;
  background-color: rgba(255, 255, 255, 1);
  position: absolute;
  &.active {
    transform: translate(0, 100%);
    z-index: 2;
  }
  &.not-active {
    transform: translate(0, 0%);
    z-index: 0;
  }
}
&:last-child {
  .ditales{
    &.active {
      transform: translate(0, -100%);
      z-index: 2;
    }
  }
}

在jQuery中添加和删除活动和非活动类

//play button
$(this).parent().find('.case-ditales').removeClass('not-active').addClass('active');

//Stop button and when play button are pushed in another box
 $('.ditales').removeClass('active').addClass('not-active');

example on codepen

编辑：

我意识到这不是转换：转换那就是问题，因为ditales box z-index需要比它覆盖的盒子更多，并且z-index在非活动时设置为0。有没有办法来解决这个问题？（请将链接发送给代码）

css转换：翻译只是在后面和堡垒都不工作

0 个答案: