草庐IT

前端知识——css之flex布局

全部标签

javascript - 如何在不使用 jQuery 重新计算布局的情况下操作元素

我有很多div元素需要重新计算它们的高度。这些div位于另一个id="content"的div中。我是这样使用jQuery的:$("#contentdiv").css("height","*="+Math.random());大约有1000个div是这样重新计算的。这样做需要一些时间,我知道这是因为布局为每个元素重新计算一次。这只需要几秒钟,但已经很多了。我之前得到了有关使用常规JavaScript文档片段的提示。我希望能够使用jQuery来执行此操作。有什么方法可以使用jQuery分离此div并在将它们写回之前在事件DOM之外对其进行操作,以便在我完成操作之前不会重新计算布局?

javascript - 隐藏元素时是否禁用 CSS3 转换?

我注意到(在Chrome43中使用jQuery)当元素有display:none时,转换被禁用。这种在所有浏览器上的标准化行为是jQuery的一个特性,还是生产中不能依赖的东西?当要在延迟函数中更改动画的CSS语句时,将启用转换。TakealookatthisJSFiddle.取消注释第3行或6以自行查看。解决方案:在生产中不能依赖此行为,因为它似乎是优化/设计选择而非规范的产物(根据@AndriyHorens的回答)。相反,您应该使用类打开和关闭动画(transition-property:none)。在Chrome43中,未能使用某个类使它对我来说不可靠。Chrome确实还需要单独

javascript - CSS随机动画

我的想法是制作一个图像,将其分解成小的部分,这些部分会在飞走时按比例缩小。我已经成功地使用了几个CSS动画-scale+translate3d-(结果不是很好,但这是一个开始)。现在,问题是我希望翻译是随机的。据我所知,有一种涉及JS/Jquery/GSAP的简单方法,还有一种涉及SCSS/Sass的更复杂的方法...我对他们都不熟悉。我找到了一个使用javascript来随机旋转的代码,并且我已将其改编为我的翻译。代码已发布here作为答案。//searchtheCSSOMforaspecific-webkit-keyframerulefunctionfindKeyframesRul

javascript - CSS 和 javascript 中的 (Chromium) alpha 颜色值(在 rgba 中)

如果我在javascript中通过rgba(r,g,b,a)将alpha值设置为1以外的任何值,则浏览器设置的实际值会略有不同。但是CSS中设置的值是完全匹配的。请参阅中的代码示例code-pen-sitewindow.onload=function(){document.getElementById("p1").style["background-color"]="rgba(255,0,0,0.3)";}RGBcolorswithopacity:RedGreen使用Chromium浏览器按F12激活检查器检查“红色”。“红色”的背景颜色设置为rgba(255,0,0,0.3),但在I

javascript - 如何仅使用 CSS3 将动态创建的元素平滑地添加到 DOM 中?

我的需求很简单,但我找不到合适的解决方案。我创建元素并将它们作为元素列表添加到DOM,每个新元素都在旧元素之前添加。我希望“顺利”添加新元素。每个元素的高度是动态的,因此必须符合CSS规则。我想我必须使用CSSanimations和keyframes,据我所知我不能使用transitions因为有时itisnotrenderedbythebrowser.我不想使用Javascript,所以我更愿意避免使用setTimeout()或jQuery的解决方案。我确信这可以使用现代CSS正确完成,但我仍然需要找到正确的方法。我有一个解决方案的开始(见下文),但是仍然有max-height:10

javascript - 识别由 Flex 中的 FileReference 对象为 PNG 图像编码的数据的性质

我正在尝试将基于Flex的应用程序迁移到JavaScript,并遇到了将PNG图像发送到服务器的文件上传功能。我无权访问服务器代码,所以我试图模仿flex应用程序发出的请求。flex应用程序发送的请求数据如下所示:我使用Filereader.readAsBinaryString()读取PNG的请求数据如下所示:如您所见,flex应用程序进行了一些我无法理解的编码。虽然这两个内容看起来一样,但还是有一些细微的差别,这可以通过每个内容的长度来确认。AS3FileReference文档表明它使用load()function将文件内容转换为ByteArray.有人可以解释他们是如何编码的吗?

javascript - 保存拖放布局的最佳方式

这个问题我见过几次,但它们大多与单个对象和cookie有关。我正在构建一个具有工具箱拖放功能的应用程序(非常像您在VisualStudio中看到的——即将对象拖到表单上,给它们命名,等等)因此可放置区域可以有许多对象,包括嵌套的可丢弃物。对于保存到SQLServer数据库然后重新加载如此复杂的布局的最佳方式有何看法?对象需要完全按照保存时的方式加载和显示。它将由ajax完成,但除此之外,我不确定继续进行的最佳方式。此外,任何可能为我指明正确方向的例子都会很棒。非常感谢。 最佳答案 您可以通过XML或JSON将数据序列化,并将序列化后

javascript - CSS 谷歌地图自定义信息窗口

我一直在使用来自http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/infowindow-custom.html的代码,这是目前谷歌关于如何在MapsAPIv3中创建自定义InfoWindow的最佳示例。我一直在研究它,到目前为止我已经接近工作了,除了一件事,它是div容器,文本内容不会扩展以适应内容,所以它只是掉落而不是扩大气泡。如果我给内容容器一个固定的像素宽度,它可以正常工作,但我无法根据其中的文本量来扩展它。我已经在这个问题上停留了一段时间。任何帮助将不胜感激!这是HTML页面Gayborhood

javascript - 如何在生产环境中加载 minify css

我的元素中加载了很多JS和CSS。为了提高网站性能,我开始使用与Ant构建集成的YUICompression。因此,每次我构建元素时,它都会创建带有附加“-min.js”的缩小文件示例:构建后的myscript.js,新文件“myscript-min.js”。现在我已经更改了所有文件以在我的页面中加载myscript-min.js。是否有任何自动化或更简单的方法来加载minify文件。提前致谢!!! 最佳答案 在您的代码中,尝试确定您加载页面的环境(生产或开发)。例如,在本地机器上开发时,您可以检查您的IP地址、服务器环境变量(使用

javascript - 如何检测CSS动画的重绘率(fps)?

我对CSS动画的流畅性很感兴趣。作为一些额外的要点:我最感兴趣的是移动设备(WebKit)的性能,如果可以在正常操作期间收集数据(真实用户做真实的事情),那将会有所帮助。 最佳答案 ChromeBetaforAndroid支持通过在chrome://flags中设置flag获取FPS 关于javascript-如何检测CSS动画的重绘率(fps)?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/qu