所需数量之间的过渡

Question

一个元素有类 slider-item:

.slider-item{
  transform: translateY(100%);
  transition: transform 100s ease;
  transition-delay: 800ms;
 }

当我点击一个按钮时，我想让这个元素在以下几个方面进行转换。translateY(-100%) 和 translateY(0).

我加班 prev-version 和 next 分别由javascript实现。

.slider-item.prev-version{
  transform: translateY(-100%);
  transition: none;
}
.slider-item.next{
  transform: translateY(0);
  transition: transform 100s ease;
  transition-delay: 800ms;
}

但我看到过渡发生在 translateY(100%) 和 translateY(0). next 类覆盖 transform: translateY(-100%); 在 prev-version 类。请帮助我，我应该怎么做？

Answer 1

最好的办法可能是使用Vanilla JavaScript、jQuery或其他类型的框架来直接编辑和改变CSS属性。

例如jQuery的版本就可以。

$("#slider-item.next").css("transform:translateY(0)");

请记住，你需要添加逻辑，如果属性是100，它就会变回0，然后如果是0，它就会变回100。

w3schools.comjqueryjquery_css.asp

Answer 2

我可能不明白你的问题，但似乎你可以使用 css animation 为此。

document.querySelector('button').addEventListener('click', function () { document.querySelector('.slider-item').classList.add('example'); });

button {position: fixed; bottom: 10vh} /* just for demo */
.slider-item{
  transform: translateY(100%);
  transition: transform 100s ease;
  transition-delay: 800ms;
}
.example {
  animation: example 3s ease-in-out;
}
@keyframes example {
  from {transform: translateY(-100%);}
  to {  transform: translateY(100%);} /* should be the same as the value declared initial on .slider-item */
}

<div class="slider-item">Slider Item</div>
<button>Click</button>