CSS

Question

我已经使用以下代码（或其类似代码）一段时间来显示给定帖子的信息：

HTML：

<div class="main">
<div class="info">
    <div>Words</div>
    <div>Words</div>
     <div>Words</div>
     <div>Words</div>
     <div>Words</div>
</div>

CSS：

.main {
    position:relative;
    background-color:#aaa;
    margin:150px auto 0 auto;
    width:50%;
    height:300px;
}

.info {
    background-color:#ccc;
    position:absolute;
    width:30%;
    top:0;
    left:100%;
    height:100%;
}
.info div {
     position:relative;
     right:100%;
    opacity:0;
    margin:10px 7px 20px 7px;
    transition:all .5s ease-in-out;
}
.main:hover .info div:nth-child(1){
    transition:all .5s ease-in-out;
    right:0;
    opacity:1;
}
.main:hover .info div:nth-child(2){
    transition:all .5s ease-in-out .1s;
    right:0;
    opacity:1;
}
.main:hover .info div:nth-child(3){
    transition:all .5s ease-in-out .2s;
    right:0;
    opacity:1;
}
.main:hover .info div:nth-child(4){
    transition:all .5s ease-in-out .3s;
    right:0;
    opacity:1;
}
.main:hover .info div:nth-child(n + 4){
    transition:all .5s ease-in-out .4s;
    right:0;
    opacity:1;
}

我试图找到一个无论信息div中有多少div的解决方案;例如，如果有50个div，我希望每个div比最后一个晚出来。在给出的示例中，.info中有一定数量的div，但在这种情况下，我希望将其应用于将有一个未知数量的div-它可能是50，它可能是没有。

所以，如果可能的话，我希望是否有一个Javascript解决方案可以遍历不同数量的div，取代我当前的CSS转换代码。

Answer 1

我只是在加载文档时在JavaScript中设置所有这些transition的CSS div属性：

var wordDivs;
document.addEventListener("DOMContentLoaded", function() { //When the document loads...
    //Get all of the div elements (and some text, because this is .childNodes [I could use .children here, but I don't think Safari supports that]).
    wordDivs = document.getElementById("main").childNodes[1].childNodes;
    //We loop through wordDivs...
    for (var i = 0; i < wordDivs.length; i++) {
        if (wordDivs[i] instanceof HTMLDivElement) { //If the element we're checking is a div...
            //We set its CSS transition property.
            wordDivs[i].style.transition = "all .5s ease-in-out ."+(i-1)/2+"s";
        }
    }
});

这里是小提琴：http://jsfiddle.net/NobleMushtak/uv69C/

Answer 2

试试这支笔：http://codepen.io/Leth0_/pen/lhwfE

$(".main").mouseover(function(){
  var x = 200;
  $(".info").children().each(function(){    
    $(this).delay(x).fadeIn(x).animate({"right":"0%"},"slow").css({opacity:1});    
  x = x + 200;
  });
});
$(".main").mouseout(function(){
  var x = 200;
  $(".info").children().each(function(){    
    $(this).delay(x).animate({"right":"100%"},"slow").fadeOut(x+200)    
  x = x + 200;
  });
});

试试这支笔，我相信它会做你想要的。当多次进出div时它不起作用，但如果可以，我会解决这个问题。我会在编辑时编辑。

Answer 3

我不知道你的意思是说使用：悬停元素需要是子节点，但无论如何使用你的代码并根据你想做的事情我相信这实际上是一个非常好的解决方案< / p>

CSS

.main:hover .info div{
    transition-property:all;
    transition-timing-function:ease-in-out;
    transition-duration:.5s;
    right:0;
    opacity:1;
}

然后在添加帖子后再进行

JS

$('.main:hover .info div').css('transition-delay',function(index){
     if(index>=4){
         return '.4s'
     }
     else{
       return index*0.1+'s'
    }


})

这样可以减轻js动画的负担，并且如果你可以将动画和样式传递给css，而不是使用动画，那么你的代码可以更好地运行。

如果你想在JS中完成它，你可以做类似

的事情

    $('baseElement').on('mouseenter','.main',function(event){
           $($(event.target).find('.info div)).animate({});//perform what ever animation you want here
    });

    $('baseElement').on('mouseleave','.main',function(event){
          $($(event.target).find('.info div)).animate({});//return to the initial state
    })

我怎么也不建议这样做，因为它不仅涉及非最佳方式的更多处理和动画，而且还将你的DOM操作归结为你的javascript事件，如果你的项目增长，最终会让你更难调试

Answer 4

就个人而言，我会保留CSS。你正在完成的是纯粹的表现。这非常适合CSS。另外，你没有动画的JS依赖。

对于CSS，您可以清理它以使其更易于维护。例如：

.main {
    position:relative;
    background-color:#aaa;
    margin:150px auto 0 auto;
    width:50%;
    height:300px;
}

.info {
    background-color:#ccc;
    position:absolute;
    width:30%;
    top:0;
    left:100%;
    height:100%;
}
.info div {
    position:relative;
    right:100%;
    opacity:0;
    margin:10px 7px 20px 7px;
    transition:all .5s ease-in-out;
}
.main:hover .info div {
    right: 0;
    opacity: 1;
}
.main:hover .info div:nth-child(2){
    transition-delay: .1s;
}
.main:hover .info div:nth-child(3){
    transition-delay: .2s;
}
.main:hover .info div:nth-child(4){
    transition-delay: .3s;
}
.main:hover .info div:nth-child(n + 4){
    transition-delay: .4s;
}

但是，如果代码行太多，使用JS直接操作transition-delay属性是另一种选择。

Javascript替代：hover;为每个div孩子使用循环

4 个答案:

CSS

JS