Chuyển tiếp CSS3 bên trong jQuery .css()

Question

Khi tôi thêm dòng chuyển tiếp vào mã của tôi, nó phá vỡ jQuery. Làm thế nào tôi có thể sửa chữa nó?

a(this).next().css({ 
    left: c, 
    transition: 'opacity 1s ease-in-out' 
}); 

Tôi đang cố gắng để thiết lập một phai từ một div này sang bên một thanh trượt

Answer 1

Bước 1) Tháo dấu chấm phẩy, nó là một đối tượng bạn đang tạo ...

a(this).next().css({ 
    left  : c, 
    transition : 'opacity 1s ease-in-out'; 
}); 

để

a(this).next().css({ 
    left  : c, 
    transition : 'opacity 1s ease-in-out' 
}); 

Bước 2) Vender-tiền tố ... không có trình duyệt sử dụng transition vì nó là tiêu chuẩn và điều này là một tính năng thử nghiệm ngay cả trong các trình duyệt mới nhất:

a(this).next().css({ 
    left    : c, 
    WebkitTransition : 'opacity 1s ease-in-out', 
    MozTransition : 'opacity 1s ease-in-out', 
    MsTransition  : 'opacity 1s ease-in-out', 
    OTransition  : 'opacity 1s ease-in-out', 
    transition  : 'opacity 1s ease-in-out' 
}); 

Đây là một bản demo: http://jsfiddle.net/83FsJ/

Bước 3) Better vender-prefixes ... Thay vì thêm tấn CSS không cần thiết vào các phần tử (bạn sẽ chỉ bị bỏ qua bởi trình duyệt), bạn có thể sử dụng jQuery để quyết định tiền tố nào để sử dụng:

$('a').on('click', function() { 
    var myTransition = ($.browser.webkit) ? '-webkit-transition' : 
         ($.browser.mozilla) ? '-moz-transition' : 
         ($.browser.msie) ? '-ms-transition' : 
         ($.browser.opera) ? '-o-transition' : 'transition', 
     myCSSObj  = { opacity : 1 }; 

    myCSSObj[myTransition] = 'opacity 1s ease-in-out'; 
    $(this).next().css(myCSSObj); 
});​ 

Đây là một bản demo: http://jsfiddle.net/83FsJ/1/

Cũng lưu ý rằng nếu bạn chỉ định trong tuyên bố transition bạn mà tài sản để animate là opacity, thiết lập một bất động sản sẽ không được hoạt hình left.

Answer 2

Mã của bạn có thể bị lộn xộn nhanh khi xử lý các chuyển đổi CSS3. Tôi khuyên bạn nên sử dụng một plugin chẳng hạn như jQuery Transit xử lý sự phức tạp của hoạt ảnh/chuyển tiếp CSS3.

Hơn nữa, plugin sử dụng chuyển đổi webkit thay vì chuyển đổi webkit, cho phép thiết bị di động sử dụng tăng tốc phần cứng để cung cấp cho ứng dụng web của bạn giao diện gốc khi hoạt ảnh diễn ra.

JS Fiddle Live Demo

Javascript:

$("#startTransition").on("click", function() 
{ 

    if($(".boxOne").is(":visible")) 
    { 
     $(".boxOne").transition({ x: '-100%', opacity: 0.1 }, function() { $(".boxOne").hide(); }); 
     $(".boxTwo").css({ x: '100%' }); 
     $(".boxTwo").show().transition({ x: '0%', opacity: 1.0 }); 
     return;   
    } 

    $(".boxTwo").transition({ x: '-100%', opacity: 0.1 }, function() { $(".boxTwo").hide(); }); 
    $(".boxOne").css({ x: '100%' }); 
    $(".boxOne").show().transition({ x: '0%', opacity: 1.0 }); 

}); 

Hầu hết các công việc khó khăn nhận được sự tương thích qua trình duyệt được thực hiện cho bạn là tốt và nó hoạt động như một nét duyên dáng trên các thiết bị di động.