所需数量之间的转换

Question

元素具有类slider-item:

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

当我单击按钮时，我希望元素在translateY(-100%)和translateY(0)之间转换。

我通过javascript分别添加类prev-version和next：

.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类覆盖prev-version类中的transform: translateY(-100%);。请帮帮我该怎么办？

Answer 1

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

例如，jQuery的版本是：

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

请记住，您需要添加逻辑，以便如果属性为100，它会将其更改回0，然后如果属性为0，它会更改回100。

w3schools.com/jquery/jquery_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>