强制溢出更改发生在动画结束时

Question

#div {
  width: 20px;
  border: 2px solid black;
  animation: 5s change-width paused forwards;
}

@keyframes change-width {
  from { overflow: hidden; }
  to   { overflow: visible; width: 100px; }
}

<div id="div">abcdefghijklmnopqrstuvwxyz</div>
<button onclick="document.getElementById('div').style.animationPlayState = 'running'">
  Run
</button>

看看 discrete animation of overflow 是如何在动画中间突然变化的。如何强制它发生在动画结束时？

我尝试将 overflow: hidden 从 @keyframes 更改为 .default 规则但无济于事。

#div {
  width: 20px;
  border: 2px solid black;
  overflow: hidden;
  animation: 5s change-width paused forwards;
}

@keyframes change-width {
  to {
    overflow: visible;
    width: 100px;
  }
}

<div id="div">abcdefghijklmnopqrstuvwxyz</div>
<button onclick="document.getElementById('div').style.animationPlayState = 'running'">Run</button>

Answer 1

=== 溢出属性无法动画 ===
see list of accepted animated properties

你需要 js 代码：

const  myDiv = document.querySelector('#my-div')

document.querySelector('#my-button').onclick =_=>
  {
  myDiv.classList.add('change_w')
  setTimeout(()=>{ myDiv.classList.add('no-overflow')}, 3000)
  }

#my-div {
  width      : 20px;
  overflow   : hidden;
  border     : 2px solid black;
  transition : width 3s ease-in-out
  }
#my-div.change_w {
  width : 100px;
}
#my-div.no-overflow {
  overflow: visible;    
  }

<div id="my-div">abcdefghijklmnopqrstuvwxyz</div>
<button id="my-button"> Run </button>

you can also use a transition end event

const  myDiv = document.querySelector('#my-div')

document.querySelector('#my-button').onclick =_=>
  {
  myDiv.classList.add('change_w')
  } 
myDiv.ontransitionend =_=> myDiv.classList.add('no-overflow')

#my-div {
  width      : 20px;
  overflow   : hidden;
  border     : 2px solid black;
  transition : width 5s ease-in-out
  }
#my-div.change_w {
  width : 100px;
}
#my-div.no-overflow {
  overflow: visible;    
  }

<div id="my-div">abcdefghijklmnopqrstuvwxyz</div>
<button id="my-button"> Run </button>

for the reccord : in and out show / hide

const
  myDiv = document.querySelector('#my-div')
  mybt  = document.querySelector('#my-button')

  mybt.onclick =_=>
  {
  mybt.disabled = true
  myDiv.classList.remove('no-overflow') 

  let largeWidth = myDiv.classList.toggle('change_w')
  myDiv.addEventListener('transitionend', finish )
    
  function finish()
    {
    mybt.disabled = false
    if (largeWidth) myDiv.classList.add('no-overflow') 
    myDiv.removeEventListener('transitionend', finish )
    }
  }

#my-div {
  width      : 40px;
  overflow   : hidden;
  border     : 1px solid black;
  transition : width 3s ease-in-out
  }
#my-div.change_w {
  width : 100px;
  }
#my-div.no-overflow {
  overflow: visible;    
  }

<div id="my-div">abcdefghijklmnopqrstuvwxyz</div>
<button id="my-button"> Run </button>

强制溢出更改发生在动画结束时

force overflow change to happen at the end of an animation

html

javascript

css

animation