使用本机JavaScript在转换中间获取CSS值

这个问题以前被问过，但是答案使用jQuery

---

因此，我将调整这个问题，专门要求一个本机解决方案，以最小化依赖关系

---

假设你有一个

，并且

处于中间过渡期，它的

不透明度

值和

顶部

值。如何使用nativeJavaScript在转换过程中获取这两个属性的值？

重复问题中引用的答案很容易修改为不使用jquery。那里没有黑魔法

真正的问题是你为什么要这样做

---

如果您需要对转换进行控制，只需使用javascript实现部分转换，执行所需操作，然后完成转换。

将jQuery脚本从链接线程移植到其普通javascript等价物中非常容易，下面是一个示例。一旦计时器过期，输出将打印在右侧（

output#op

元素）

我们正在做的工作如下：

• 将两个事件处理程序附加到触发转换的元素（有时触发元素可能与具有动画的元素不同）。在另一个线程中，触发转换的元素和正在转换的元素是相同的。在这里，我把它放在两个不同的元素上，只是为了一个不同的演示
• 一个事件处理程序用于

  mouseover

  事件，这将创建一个计时器（使用

  setTimeout

  ），该计时器获取计时器到期时转换的元素的

  opacity

  和

  top

  值
• 另一个事件处理程序用于

  mouseleave

  事件，当用户悬停在需要获取

  opacity

  和

  top

  值的特定点之前时，清除计时器
• 可以通过使用获取正在转换的元素的

  不透明度

  和

  顶部

  值
• 与另一个线程中的演示不同（它使用

  setInterval

  ），这里我使用了

  setTimeout

  。不同之处在于

  setInterval

  添加了一个间隔，因此函数每

  x

  秒执行一次，而传递给

  setTimeout

  的函数只在

  x

  秒后执行一次。你可以用任何适合你需要的

var wrap=document.querySelector（'.wrapper'），
el=document.querySelector（“.with transition”），
op=document.querySelector（'#op'）；
var-tmr；
wrap.addEventListener（'mouseenter'，function（）{
tmr=设置超时（函数（）{
op.innerHTML='Opacity:'+window.getComputedStyle（el.Opacity）+
“，Top:”+window.getComputedStyle（el.Top）；
}, 2500);
});
wrap.addEventListener（'mouseleave'，function（）{
清除超时（tmr）；
});
.wrapper{
位置：相对位置；
高度：400px；
宽度：400px；
背景：黄绿色；
}
.有过渡{
位置：绝对位置；
顶部：0px；
左：100px；
宽度：200px；
高度：100px；
背景：黄色；
不透明度：0；
过渡：所有5s线性；
}
.wrapper:悬停。带转换{
顶部：300px；
不透明度：1；
}
输出{
位置：绝对位置；
顶部：50px；
右：50px；
}

你能发布你用来进行转换的测试代码吗？@spozun，这不需要。因为，我不知道如何使用JS实现这一点，所以只有CSS表和HTML。例如，我将使用css转换属性的规则
div{…}
和
div:hover{…}
，currentStyle可以代替getComputedStyle吗？（）不，请不要使用
currentStyle
。这是一种特定于IE的方法，现在甚至IE11和Edge都支持
getComputedStyle
。从文档中可以看出
getComputedStyle
返回起始值或结束值，而不是介于两者之间：。您确定您的解决方案吗？我在WebKit上进行了测试，它似乎确实报告了中间值。因此，Mozilla文档似乎是错误的，您的答案至少对WebKit是正确的。Amazing@AnOriginalAliasjavascript没有依赖性！我的观点是没有必要抓住中间过渡。。。