0

これよりもcss3トランジションをトリガーするより良い方法はありますか、これは少しハッキーだと思いますか、これは誰もがこれを行う方法ですか？

次の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);
});

次に、移行がトリガーされますが、これは少しハッキーではありませんか？別の解決策はありますか？

読んでくれてありがとう私の答えが明確だったと思います。

4

2 に答える 2

0

コードを少し変更するだけです...... 

  .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 の高さを設定するか、div の中にテキストを入れて変更を確認してください。

于 2012-05-14T12:09:58.123 に答える
0

これをバックグラウンド アニメーションに使用してください。すべてのブラウザをサポートします。例: 

div ul li a{background:url(../images/asso/arow.png) no-repeat left 0;}
div ul li a:hover{ background-position:0 -66px;} 




(function($) {
    $.extend($.fx.step,{
        backgroundPosition: function(fx) {
            if (fx.state === 0 && typeof fx.end == 'string') {
                var start = $.curCSS(fx.elem,'backgroundPosition');
                start = toArray(start);
                fx.start = [start[0],start[2]];
                var end = toArray(fx.end);
                fx.end = [end[0],end[2]];
                fx.unit = [end[1],end[3]];
            }
            var nowPosX = [];
            nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
            nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
            fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];

           function toArray(strg){
               strg = strg.replace(/left|top/g,'0px');
               strg = strg.replace(/right|bottom/g,'100%');
               strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
               var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
               return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
           }
        }
    });
})(jQuery);



$(function(){
    $('ul li')
        .mouseover(function(){
            $(this).find('a').stop().animate({backgroundPosition:"(0 -66)"}, {duration:500})
        })
        .mouseout(function(){
            $(this).find('a').stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
            })
        });
于 2012-05-14T11:07:46.100 に答える