对于这个问题的这么多更新，我很抱歉，我很高兴每个人都试图帮助我。我认为下面有一个更清晰的理解这个问题的方法:
如果您在更改附加过渡的属性之前立即将元素的显示属性设置为 block ，则 CSS 过渡将不适用。考虑以下代码:
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;
该元素将正确显示，但没有任何过渡。此问题的解决方法是通过访问元素的视觉属性之一强制重绘:
dom.creative.style.display = 'block';
var a = dom.creative.offsetHeight; /* <-- forces repaint */
dom.creative.style.opacity = 1;
有什么好的解决办法吗？好的，我的意思是每次我需要更改显示属性和附加过渡的属性时，不要添加额外的 javascript 代码行。
最佳答案
根据您在问题中提供的代码，我将在这里采用完全不同的方式，并使用 animation 代替，这将使整个 repaint 问题消失离开
更新了一个脚本，将 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 (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>
如果不需要 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');
})#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>
对于transition，除了offsetHeight和setTimeout方案外，还有3:rd，视觉效果一样作为切换显示 block /无，将高度/宽度设置为 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>
关于javascript - 不触发显示 block 和 css 转换的解决方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38209364/
我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div
总的来说，我对ruby还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用
类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc
我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，
我正在尝试设置一个puppet节点，但rubygems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由rubygems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib
我想了解Ruby方法methods()是如何工作的。我尝试使用“ruby方法”在Google上搜索，但这不是我需要的。我也看过ruby-doc.org，但我没有找到这种方法。你能详细解释一下它是如何工作的或者给我一个链接吗？更新我用methods()方法做了实验，得到了这样的结果:'labrat'代码classFirstdeffirst_instance_mymethodenddefself.first_class_mymethodendendclassSecond使用类#returnsavailablemethodslistforclassandancestorsputsSeco
我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值，但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗？ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案 只需将数组映射为整数:@land边注如果你想得到一条线的平均值，你可以这样做:values=@input[x]