时间戳

首页 > 解决方案 > 强制在动画结束时发生溢出变化

javascript - 强制在动画结束时发生溢出变化

问题描述

#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>

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

我尝试将overflow: hiddenfrom转换@keyframes为.defaultrule 但无济于事。

#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>

标签： javascripthtmlcssanimation

解决方案

===溢出属性不能动画。===
查看接受的动画属性列表

为此，您需要 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>

您还可以使用过渡结束事件

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>

记录：进出显示/隐藏

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>

推荐阅读