CSS Transition Direction - Can It Always Be The Same?-CodePudding

Here is an example: https://codepen.io/jon424/pen/XWzGNLe

I have a button here that lets you toggle the visibility of an image. When the button is clicked, the image disappears from the bottom to the top. When you click the button again, the image reappears from the top to the bottom.

I would like the transition to move in the same direction each time. So, when the user sees the image and clicks on the button, the image disappears from the bottom to the top. When the user clicks the button again, the image reappears from the bottom to the top.

Is there a way to use transitions without this kind of “alternating” activity?

HTML

<button>Toggle</button>
<div >
   <img  src="https://picsum.photos/200/300">
   <div ></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%);
}

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

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

CodePudding user response：

Is that what you want?

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 >
   <img  src="https://picsum.photos/200/300">
   <div ></div>
</div>

CodePudding user response：

You can use keyframes for this, or listen to 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 >
   <img  src="https://picsum.photos/200/300">
   <div ></div>
</div>