jquery - css3 jquery 转换

Question

有没有比这更好的触发 css3 转换的方法，我认为这有点 hacky 还是每个人都这样做？

假设我们有一个带有以下 CSS 的 div:

.box{
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -50px 0px 0px -50px;

  width: 100px;
  opacity: 0;
  transition: opacity .3s ease-out;
}

.box.box-visible{
   opacity: 1;
}

现在我们得到了以下 jQuery:

$(function(){
    $('.box').addClass('box-visible');
});

这不会触发动画，所以当我们这样做时:

$(function(){
    var transition = setTimeout(function(){
        $('.box').addClass('box-visible');
    }, 1);
});

然后转换被触发，但这不是有点hacky吗？还有其他解决方案吗？

感谢阅读，希望我的回答很清楚。

Answer 1

你只需要稍微修改一下你的代码......

  .box{
            position: fixed;
            top: 50%;
            left: 50%;
            margin: -50px 0px 0px -50px;
            width: 100px;
            border-width:thin;
            border-style:solid;
            background:red;
            opacity: 0;
            -moz-transition: opacity 3s ease-out;//for firefox  
            -o-transition: opacity 3s ease-out;// for opera  
            -webkit-transition: opacity 3s ease-out;// for chrome
        }  
     .box-visible{  
        opacity:1;
      }  

然后在Jquery中

     $(document).ready(function(){  
       $(function(){  
           $('.box').addClass('box-visible');  
       });
     });  

记住:要么设置 div 的高度，要么在其中放置一些文本以注意到变化。