CSS 过渡方向 - 能否始终相同？

Question

这里有一个例子：https://codepen.io/jon424/pen/XWzGNLe

我这里有一个按钮，可让您切换图像的可见性。单击按钮时，图像从底部到顶部消失。再次单击该按钮时，图像会从上到下重新出现。

我希望过渡每次都朝着相同的方向移动。因此，当用户看到图像并单击按钮时，图像从底部到顶部消失。当用户再次单击该按钮时，图像从下到上重新出现。

有没有一种方法可以在没有这种“交替”的情况下使用过渡activity？

HTML

<button>Toggle</button>
<div class="parent">
   <img class="child1" src="https://picsum.photos/200/300">
   <div class="child1 covering"></div>
</div>

CSS

.parent {
     position: relative;
     overflow: hidden;
     width: 300px;
     height: 300px;
     margin: 10px;
}
 .child {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
}
 .covering {
     z-index: 1;
     background: #fff;
     transition: transform 1s ease-in-out;
     transform: translateY(100%);
}
 .covered {
     transform: translateY(0%);
}

JS

const firstTarget = document.querySelector(".firstTarget");
const covering = document.querySelector(".covering");

document.querySelector('button').addEventListener('click', () => { document.querySelector('.covering').classList.toggle('covered');});

Answer 1

这是你想要的吗？

const targetClassList = document.querySelector(".image-item").classList;

document.querySelector("button").addEventListener("click", () => {
  if (targetClassList.contains("open")) {
    targetClassList.remove("open");
    targetClassList.add("close");
  } else {
    targetClassList.add("open");
    targetClassList.remove("close");
  }
});

.parent {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 300px;
  margin: 10px;
}
.child {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.image-item {
  z-index: 1;
  background: #fff;
}
.close {
  animation: closeAni 1s forwards;
}
.open {
  animation: openAni 1s forwards;
}

@keyframes openAni {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

@keyframes closeAni {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

<button>Toggle</button>
<div class="parent">
   <img class="child" src="https://picsum.photos/200/300">
   <div class="child image-item"></div>
</div>

Answer 2

您可以使用 keyframes 或收听 transitionend。

const btn = document.querySelector('button'),
    cover = document.querySelector('.cover');

btn.addEventListener('click', ()=> {
    
  if(cover.classList.contains('covered')){
    cover.classList.add('remove_covered');
  } else {
    cover.classList.add('covered');
  }

  cover.ontransitionend = () => {
    if(cover.classList.contains('remove_covered'))
        cover.classList.remove('covered','remove_covered');
    };
  
});

.child {
  width: 300px;
  height: 300px;
}

.parent {
  position: relative;
  width: 300px;
  height: 300px;
}

.cover {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0;
  width: 100%;
  background: #fff;
  transition: height 1s ease-in-out;
}

.covered {
  height: 100%;
}

.remove_covered {
  top: 0;
  bottom: auto;
  height: 0;
}

<button>Toggle</button>
<div class="parent">
   <img class="child" src="https://picsum.photos/200/300">
   <div class="cover"></div>
</div>

CSS 过渡方向 - 能否始终相同？

CSS Transition Direction - Can It Always Be The Same?

javascript

css

css-transitions