Question

我想知道是否有一种比我想象的更容易的方法。

我的代码很简单：

   document.body.style['-webkit-transition'] = "background 2s";
        document.body.onmouseover = function(){
            this.style.background = "#000";
        }

我想将它实现到一个测试库中，但是我需要知道一旦用户将鼠标移出文档正文，是否有一种更简单的撤消转换的方法。

当我说更简单时，我的意思是我不想写出“document.body.onmouseout ='...'”。有什么想法吗？

Answer 1

你应该像Mathletics建议的那样编写mouseout。知道猫王是否已离开大楼的唯一方法是写下“猫王离开建筑物”的处理程序。

Answer 2

我的建议是这样的。在CSS中，定义一些过渡。

* {
    -webkit-transition: background 2s linear;
}

.fade-to-black {
    background: #000;
}

然后，您的脚本只需添加和删除此类，从而简化处理程序。你甚至可以编写一个包装器来生成适当的处理程序。这里肯定有改进的余地，但这是一个让你前进的快速而肮脏的例子。

function handleTransition(direction, type) {
    var handler;
    if (direction) {
       handler = function() {
        this.className += type;
       }
    } else {
        handler = function() {
            this.className = this.className.replace(type, '');
        }
    }
    return handler;
}

document.getElementById('someElement').onmouseover = handleTransition(1, 'fade-to-black');

document.getElementById('someElement').onmouseout = handleTransition(0, 'fade-to-black');

Demo

Answer 3

我自己想出了一个解决方案。排除@eithedog所说的内容，在“开”和“关”之间切换。此外，通过设置转换，当“打开”为“关闭”时，所需的时间相同。转换onclick没有多大意义，这基本上是一个动画。除此之外，一切都已整理出来。

在JavaScript中轻松完成和撤消CSS转换的方法？

3 个答案: