显示块和css转换不触发的解决方法 [英] workaround for display block and css transitions not triggering

问题描述

很抱歉，这个问题的许多更新，我很高兴大家试图帮助我。我想下面有一个更清楚的方式来理解这个问题：

如果将元素的display属性设置为立即阻止，CSS转换将不适用在更改带有过渡的属性之前。请考虑以下代码：

CSS：

  #creative {
 display：none; 
 opacity：0; 
 transition：opacity 0.5s; 
} 
  

HTML：

 < div id =creative> 
< span>示例文本< / span> 
< / div> 
  

Javascript：

 code> var dom = {}; 
 dom.creative = document.getElementById（'creative'）; 
 dom.creative.style.display ='block'; 
 dom.creative.style.opacity = 1; 
  

元素将正确显示，但没有任何转换。此问题的解决方法是通过访问元素的可视属性之一强制重绘：

  dom.creative.style .display ='block'; 
 var a = dom.creative.offsetHeight; / *<  -  force repaint * / 
 dom.creative.style.opacity = 1; 
  

有没有什么好办法？和好的我的意思是没有添加额外的一行javascript代码，每次我需要改变显示属性和一个属性转换附加。

解决方案

根据你的问题中提出的代码，我将使用一个完全不同的方式，使用 animation ，这将使整个重画问题消失

使用脚本更新将div设置为 display：block

  var dom = {}; dom.creative = document.getElementById（'creative'）; dom.creative.style.display ='none'; var butt = document.getElementById（'button'）; butt.addEventListener（'click'，function（e）{if creative.style.display =='block'）{dom.creative.style.display ='none';} else {dom.creative.style.display ='block'; }}） 

  #creative {display：none;不透明度：0;动画：opac 1s向前; margin：20px;} @ keyframes opac {100％{opacity：1; }} button {margin：20px;}  

 < button id =button>切换显示< / button>< div id =creative> < span>示例文本< / span>< / div>  

如果不需要 display：none ，可以使用 transition

  var dom = {}; dom.creative = document .getElementById（'creative'）; var butt = document.getElementById（'button'）; butt.addEventListener（'click'，function（e）{dom.creative.classList.toggle（'show'）;}） code> 

  #creative {opacity：0; transition：opacity 1s; margin：20px;}＃creative.show {opacity：1; transition：opacity 1s;} button {margin：20px;}  

 < button id =button>切换显示< / button>< div id =creative> < span>示例文本< / span>< / div>  

transition 除了 offsetHeight 和 setTimeout 解决方案，有一个3：rd，具有与切换显示块/无相同的视觉效果，将高度/宽度设置为0.

  var dom = {}; dom.creative = document.getElementById（'creative'）; var butt = document.getElementById（'button' ）; butt.addEventListener（'click'，function（e）{dom.creative.classList.toggle（'show'）;}）   #creative {width：0; height：0;不透明度：0; transition：opacity 1s，width 0s 1s; margin：20px 0;}＃creative.show {width：100％; height：auto;不透明度：1; transition：opacity 1s，width 0s;} button {margin：20px 0;}  

 < button id =button>切换显示< / button>< div id =creative> < span>示例文本< / span>< / div>< div>其他内容< / div>  

>

Sorry all for so many updates in this question and I'm glad for everyone trying to help me. I think below there is a more clear way to understand this problem:

CSS transitions will not apply if you set the display property of an element to block immediately before changing the property with the transition attached. Consider the following code:

CSS:

#creative {
    display: none;
    opacity: 0;
    transition: opacity 0.5s; 
}

HTML:

<div id="creative">
    <span>Sample text</span>
</div>

Javascript:

var dom = {};
dom.creative = document.getElementById('creative');
dom.creative.style.display = 'block';
dom.creative.style.opacity = 1;

The element will properly show, but without any transition. A workaround for this problem is to force a repaint by accessing one of the visual properties of the element:

dom.creative.style.display = 'block';
var a = dom.creative.offsetHeight; /* <-- forces repaint */
dom.creative.style.opacity = 1;

is there a good way around this? and by good i mean not adding a extra line of javascript code everytime i need to change the display property and a property with a transition attached.

解决方案

Based on the code you present in your question I'm going on a completely different way here, and use animation instead, which will make the whole repaint issue go away

Updated with a script the set the div to display: block

var dom = {};
dom.creative = document.getElementById('creative');
dom.creative.style.display = 'none';

var butt = document.getElementById('button');
butt.addEventListener('click', function(e) {
  
  if (dom.creative.style.display == 'block') {
    dom.creative.style.display = 'none';    
  } else {
    dom.creative.style.display = 'block';
  }

})

#creative {
  display: none;
  opacity: 0;
  animation: opac 1s forwards;
  margin: 20px;
}
@keyframes opac {
  100% {
    opacity: 1;
  }
}
button {
  margin: 20px;
}

<button id="button">Toggle display</button>

<div id="creative">
  <span>Sample text</span>
</div>

If display: none is not needed, one can use transition and simply toggle a class like this

var dom = {};
dom.creative = document.getElementById('creative');

var butt = document.getElementById('button');
butt.addEventListener('click', function(e) {
  
  dom.creative.classList.toggle('show');

})

#creative {
  opacity: 0;
  transition: opacity 1s;
  margin: 20px;
}
#creative.show {
  opacity: 1;
  transition: opacity 1s;
}
button {
  margin: 20px;
}

<button id="button">Toggle display</button>

<div id="creative">
  <span>Sample text</span>
</div>

For transition, besides the offsetHeight and the setTimeout solution, there is a 3:rd, having the same visual effect as toggle display block/none, setting the height/width to 0.

var dom = {};
dom.creative = document.getElementById('creative');

var butt = document.getElementById('button');
butt.addEventListener('click', function(e) {
  
  dom.creative.classList.toggle('show');

})

#creative {
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity 1s, width 0s 1s;
  margin: 20px 0;
}
#creative.show {
  width: 100%;
  height: auto;
  opacity: 1;
  transition: opacity 1s, width 0s;
}
button {
  margin: 20px 0;
}

<button id="button">Toggle display</button>

<div id="creative">
  <span>Sample text</span>
</div>

<div>Other content</div>

这篇关于显示块和css转换不触发的解决方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！