我的元素有 transition: transform .5s
然后它有一个单独的类:transform: translatex(-100%)
所以我想要实现的是，最初，元素位于左侧。 在窗口加载时，当元素被渲染时，我删除了转换类，浏览器将动画元素返回到它的正确位置。
但实际发生的是，当页面变得可见/呈现时，元素已经在正确的位置。而且没有动画。
我试过 setTimeout(function() {}, 0); 它不起作用。如果我将 setTimeout 设置为 1 秒，它会起作用，但有时渲染需要很长时间，我必须将 setTimeout 设置为 2 秒。但有时渲染速度很快，2 秒是一个很长的等待时间。
总的来说，我觉得这不是一种可靠或正确的方法。
我怎样才能以正确的方式实现我想要的目标？
编辑: 对不起，伙计们，在尝试整理演示后，我意识到我并没有在窗口加载时删除类。这是因为我的元素及其 javascript 和 css 加载了 AJAX。所以它可以发生在窗口加载之前或窗口加载之后。
无论如何，现在我的问题是，如果窗口加载时间过长怎么办？有没有可能我的元素会在窗口完成加载之前呈现？还是浏览器仅在整个窗口完成加载时才呈现？
因为我想尽快为元素设置动画。那么，在窗口需要很长时间加载(图像和慢速连接等)的情况下，等待窗口加载是否安全？
如果我在窗口加载后使用 AJAX 加载元素，我是否可以通过删除转换立即运行动画？或者我应该检测元素何时呈现？
最佳答案
您可能想尝试使用 DOMContentLoaded 的组合事件和 requestAnimationFrame . DOMContentLoaded 在文档完全加载和解析之后但在页面上的所有图像和其他资源完成下载之前触发。 requestAnimationFrame 将延迟类的删除，直到页面被绘制之后，元素才能正确过渡。
var box = document.getElementById('box'),
showBox = function (){
box.classList.remove('offscreen');
};
document.addEventListener("DOMContentLoaded", function(event) {
window.requestAnimationFrame(showBox);
});
关于javascript - 如何知道一个元素是否被渲染？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29868977/
我需要对以下Magento文件进行一些更改:public_html\js\varien\configurable.jspublic_html\js\varien\product,js问题是；我应该编辑这些文件吗？它们是核心文件吗(如果我升级了Magento，它们将被替换)？如果我不应该编辑它们，如果我想更改这些文件的内容，我应该怎么做？ 最佳答案 假设你想覆盖product.js的“重新加载”功能按照步骤->在js文件夹下创建一个新文件夹，在我们的例子中是在/js/jsoverride/->现在创建一个新的js文件，在我们的例子中，
我试图弄清楚如何在使用insertBefore函数jQuery后更新元素LI。问题是在向UL添加任何新元素后，我无法删除相同的元素(使用emailTagRemove)。看demo看问题:http://jsfiddle.net/HsRfH/<divclass="content"><spanclass="">Please,insertoneormoreemails:</span><br/><ulid="ulEmailsCotacao"class="ulEmailsCotacao&#
我有一个Javascript函数，它以HH:MM的形式给出了一天中的总工作时间。我想将这些数字转换为小数，以便将它们相加。我现在似乎遇到了错误:functiontimeToDecimal(t){t=t.split(':');return=t[0]*1+'.'parseInt(t[1])/60;}我错过了什么重要的东西吗？我只是不断收到语法错误。 最佳答案 functiontimeToDecimal(t){vararr=t.split(':');vardec=parseInt((arr[
我看到的启动进程的唯一答案是使用一种叫做child_process的东西。但是我想生成一个完全独立于我当前正在运行的Node进程的全新进程，这可能吗？ 最佳答案 您可以在分离状态下生成子进程，忽略输出，并使用child.unref()从父事件循环中删除子进程。此代码将启动someScript.sh，并在保持someScript.sh运行的同时退出。varspawn=require('child_process').spawn;varchild=spawn(__dirname+'/someScript.sh&#
我有:<k-myelement><k-anotherelement></k-anotherelement></k-myelement>当我这样定义模板时:<polymer-elementname="k-myelement"><template><contentselect="k-anotherelement"id="anotherelement"></content></template></polymere-element&
这个问题在这里已经有了答案:HowdoIreplacealloccurrencesofastringinJavaScript?(78个答案)关闭8年前。如何使用JavaScript删除字符串中的双下划线或多下划线？例如stack__overflow___网站我需要删除__并将其替换为单个_。
为什么&&运算符返回最后一个值(如果语句为真)？("Dog"==("Cat"||"Dog"))//false("Dog"==(false||"Dog"))//true("Dog"==("Cat"&&"Dog"))//true("Cat"&&true)//true(false&&"Dog")//false("Cat"&&"Dog")//
我有一个类似(固定定位)的模态，类似于facebook在最新的android版本中的feed/chatinmessenger中的评论。我想要的看起来与此类似:因此，当您专注于输入时，键盘会打开并缩小WebView。默认情况下它不工作，我找不到任何解决方案。我试图将此首选项添加到config.xml但adjustResize没有做任何事情，并且stateVisible只是在我启动时打开键盘应用程序。<preferencename="android-windowSoftInputMode"value="stateVisible|adjustResize"
我有一个关于Chart.js的简单问题，我想知道如何修复我的图表。我使用Chart.js和respChartJS(https://github.com/arifLogic/respChartJS)演示:http://jsfiddle.net/k3YH7/1/vardata={labels:["Something#1","Something#2","Something#3"],datasets:[{fillColor:"rgba(224,34,34,0.5)",strokeColor:"#830505",da
这个问题在这里已经有了答案:GoogleMapsAPI:openurlbyclickingonmarker(6个答案)关闭8年前。简单问题:我正在尝试将我的标记链接到Googlemap(APIv3)上的外部URL。可以只使用http://www.google.com作为现在的链接。Javascript:<scriptsrc="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script><script>functioninitialize(){va
我需要对以下Magento文件进行一些更改:public_html\js\varien\configurable.jspublic_html\js\varien\product,js问题是；我应该编辑这些文件吗？它们是核心文件吗(如果我升级了Magento，它们将被替换)？如果我不应该编辑它们，如果我想更改这些文件的内容，我应该怎么做？ 最佳答案 假设你想覆盖product.js的“重新加载”功能按照步骤->在js文件夹下创建一个新文件夹，在我们的例子中是在/js/jsoverride/->现在创建一个新的js文件，在我们的例子中，
我试图弄清楚如何在使用insertBefore函数jQuery后更新元素LI。问题是在向UL添加任何新元素后，我无法删除相同的元素(使用emailTagRemove)。看demo看问题:http://jsfiddle.net/HsRfH/<divclass="content"><spanclass="">Please,insertoneormoreemails:</span><br/><ulid="ulEmailsCotacao"class="ulEmailsCotacao&#
我有一个Javascript函数，它以HH:MM的形式给出了一天中的总工作时间。我想将这些数字转换为小数，以便将它们相加。我现在似乎遇到了错误:functiontimeToDecimal(t){t=t.split(':');return=t[0]*1+'.'parseInt(t[1])/60;}我错过了什么重要的东西吗？我只是不断收到语法错误。 最佳答案 functiontimeToDecimal(t){vararr=t.split(':');vardec=parseInt((arr[
我看到的启动进程的唯一答案是使用一种叫做child_process的东西。但是我想生成一个完全独立于我当前正在运行的Node进程的全新进程，这可能吗？ 最佳答案 您可以在分离状态下生成子进程，忽略输出，并使用child.unref()从父事件循环中删除子进程。此代码将启动someScript.sh，并在保持someScript.sh运行的同时退出。varspawn=require('child_process').spawn;varchild=spawn(__dirname+'/someScript.sh&#
我有:<k-myelement><k-anotherelement></k-anotherelement></k-myelement>当我这样定义模板时:<polymer-elementname="k-myelement"><template><contentselect="k-anotherelement"id="anotherelement"></content></template></polymere-element&
这个问题在这里已经有了答案:HowdoIreplacealloccurrencesofastringinJavaScript?(78个答案)关闭8年前。如何使用JavaScript删除字符串中的双下划线或多下划线？例如stack__overflow___网站我需要删除__并将其替换为单个_。
为什么&&运算符返回最后一个值(如果语句为真)？("Dog"==("Cat"||"Dog"))//false("Dog"==(false||"Dog"))//true("Dog"==("Cat"&&"Dog"))//true("Cat"&&true)//true(false&&"Dog")//false("Cat"&&"Dog")//
我有一个类似(固定定位)的模态，类似于facebook在最新的android版本中的feed/chatinmessenger中的评论。我想要的看起来与此类似:因此，当您专注于输入时，键盘会打开并缩小WebView。默认情况下它不工作，我找不到任何解决方案。我试图将此首选项添加到config.xml但adjustResize没有做任何事情，并且stateVisible只是在我启动时打开键盘应用程序。<preferencename="android-windowSoftInputMode"value="stateVisible|adjustResize"
我有一个关于Chart.js的简单问题，我想知道如何修复我的图表。我使用Chart.js和respChartJS(https://github.com/arifLogic/respChartJS)演示:http://jsfiddle.net/k3YH7/1/vardata={labels:["Something#1","Something#2","Something#3"],datasets:[{fillColor:"rgba(224,34,34,0.5)",strokeColor:"#830505",da
这个问题在这里已经有了答案:GoogleMapsAPI:openurlbyclickingonmarker(6个答案)关闭8年前。简单问题:我正在尝试将我的标记链接到Googlemap(APIv3)上的外部URL。可以只使用http://www.google.com作为现在的链接。Javascript:<scriptsrc="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script><script>functioninitialize(){va