1

我对 Javascript 还很陌生，所以如果我做的事情有点傻，请告诉我，但要点是：

我正在将一项新功能集成到一个结构非常严格的模板中（我基本上只得到一个纯文本链接）。我的解决方法是添加一些 jQuery，它会添加一个 onclick 方法，用我真正想要的元素替换链接。

$(document).ready(function(){
    $("li a:contains('Search')").bind("click", replaceWithSearch);
});


function replaceWithSearch(){
    var searchWrapper = constructSearchBox("");
    this.parentNode.replaceChild(searchWrapper, this);
}

这一切都有效，但我一直在这里与 UI 人员交谈，他们想要这个替换的动画。当然他们的 goto 是使用 CSS 动画，但我不太确定如何在 replaceChild 操作中添加平滑的淡入淡出或滑动动画。我是否以正确的方式思考这个问题？如果是这样，我将如何添加该动画？

4

1 回答 1

2

使用 CSS 动画，您可以执行以下操作：

.your-selector {
    animation: fadeIn 400ms ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
}

这是一个显示这个的小提琴：http: //jsfiddle.net/zt3QB/。这将使它在注入 DOM 时从 0 不透明度开始，并转到默认值，即 1。

如果你想使用 jQuery：

function replaceWithSearch(){
    var searchWrapper = constructSearchBox("").css('opacity', 0);
    this.parentNode.replaceChild(searchWrapper, this);
    // Using setTimeout because sometimes the DOM is too fast...
    setTimeout(function() {
        searchWrapper.fadeTo(400, 1);
    }, 0);
}

我还没有测试过 jQuery，但我做过类似的事情。刚刚使用 CSS 版本完成了一个项目。

于 2013-07-24T14:41:30.590 回答