為什么我的轉換在 javascript 中不起作用？

Question

我的問題是我想在制作一個按鈕的更改中加入一些過渡持續時間。 這是我的代碼：

ingenieriaInd.addEventListener('click',(e)=>{
  
  ingenieriaInd.style.transition = 'all 500ms ease-in-out';
  ingenieriaInd.style.width = '90vw';
  ingenieriaInd.style.height = '80vh';
  ingenieriaInd.style.position = 'absolute';
  ingenieriaInd.style.justifyContent = 'flex-start';
  ingenieriaInd.style.top = '5vh';
  ingenieriaInd.style.left = '-15vw';

})

所有更改都有效，但過渡無效。

我想讓我想要的更改順利進行。

Answer 1

您需要為元素設置起始位置：

只有CSS

#ingenieriaInd {
    width:  0;
    height:  0;
    position:  absolute;
    justify-content: flex-start;
    top:  0;
    left:  0;
    transition: all 500ms ease-in-out;
    -webkit-transition: all 500ms ease-in-out;
}


#ingenieriaInd:active {
    width:  90vw;
    height:  80vh;
    position:  absolute;
    justify-content: flex-start;
    top:  5vh;
    left:  -15vw;
}

CSS 和 JS

CSS

#ingenieriaInd {
    width:  0;
    height:  0;
    position:  absolute;
    justify-content: flex-start;
    top:  0;
    left:  0;
    transition: all 500ms ease-in-out;
    -webkit-transition: all 500ms ease-in-out;
}

js

ingenieriaInd = document.getElementById("ingenieriaInd")

ingenieriaInd.addEventListener('click',(e)=>{
    ingenieriaInd.style.width = '90vw';
    ingenieriaInd.style.height = '80vh';
    ingenieriaInd.style.position = 'absolute';
    ingenieriaInd.style.justifyContent = 'flex-start';
    ingenieriaInd.style.top = '5vh';
    ingenieriaInd.style.left = '-15vw';

})