Transition between desired amounts

user_10731634 0
Viewed 48

An element has class slider-item:

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

When i click on a button ,i want the element to transition between translateY(-100%) and translateY(0).

I add classes prev-version and next by javascript respectively:

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

But i see transition happens between translateY(100%) and translateY(0). next class overrides transform: translateY(-100%); in prev-version class. Please help me what should i do?

css-transitions css javascript
2 Answers

The best thing to try would probably be to use Vanilla JavaScript, jQuery, or some other type of framework to directly edit and change the CSS attributes.

So for example the jQuery version would be:

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

Keep in mind you would need to add logic so that if the attribute was 100 it would change it back to 0 and then if it was 0 it would change it back to 100.

w3schools.com/jquery/jquery_css.asp

user_65351470

I might didn't understand your question but seems that you can use css animation for this:

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>

user_65250810
Related