Hoạt hình chuyển đổi CSS với jQuery

Question

Tôi đang cố gắng tạo hoạt ảnh cho một div và làm cho nó xoay vòng theo trục y 180 độ. Khi tôi gọi đoạn mã sau tôi nhận được một lỗi jQuery:

$("#my_div").animate({ 
     "transform": "rotateY(180deg)", 
     "-webkit-transform": "rotateY(180deg)", 
     "-moz-transform": "rotateY(180deg)" 
    }, 500, function() { 
     // Callback stuff here 
    }); 
}); 

Nó nói "lỗi chưa gặp: Không thể đọc thuộc 'defaultView' không xác định" và nói rằng đó là trong jQuery tự nộp ... những gì tôi làm sai ?

Answer 1

Hãy thử điều này:

$('#myDiv').animate({ textIndent: 0 }, { 
    step: function(go) { 
     $(this).css('-moz-transform','rotate('+go+'deg)'); 
     $(this).css('-webkit-transform','rotate('+go+'deg)'); 
     $(this).css('-o-transform','rotate('+go+'deg)'); 
     $(this).css('transform','rotate('+go+'deg)'); 
    }, 
    duration: 500, 
    complete: function(){ alert('done') } 
}); 

http://jsfiddle.net/RPSzb/2/

Answer 2

Bạn cũng có thể ấn định trước vòng quay trong một lớp học CSS và sử dụng jQuery để thêm/gỡ bỏ các lớp:

CSS:

#my_div { 
    -moz-transition: all 500ms ease; 
    -o-transition: all 500ms ease; 
    -webkit-transition: all 500ms ease; 
    transition: all 500ms ease; 
} 
.rotate { 
    -moz-transform: rotate(180deg); 
    -o-transform: rotate(180deg); 
    -webkit-transform: rotate(180deg); 
    transform: rotate(180deg); 
} 

jQuery:

$("#my_div").addClass('rotate'); 

Answer 3

jQuery không thể động các đặc tính biến đổi ra khỏi hộp. Nhưng bạn có thể làm động thuộc tính tùy chỉnh với .animate() và làm việc chuyển đổi "bằng tay" bằng cách sử dụng step function:

var $myDiv = $("#my_div"), 
    ccCustomPropName = $.camelCase('custom-animation-degree'); 
$myDiv[0][ccCustomPropName ] = 0; // Set starting value 
$myDiv.animate({ccCustomPropName : 180}, 
    { 
     duration: 500, 
     step: function(value, fx) { 
      if (fx.prop === ccCustomPropName) { 
       $myDiv.css('transform', 'rotateY('+value+'deg)'); 
       // jQuery will add vendor prefixes for us 
      } 
     }, 
     complete: function() { 
      // Callback stuff here 
     } 
    }); 

Xem this fiddle cho một ví dụ làm việc (click vào hộp màu xanh).

Điều này tương tự như undefined's answer nhưng không lạm dụng thuộc tính CSS thực.

Lưu ý: Các tên của thuộc tính tùy chỉnh phải là một tên jQuery.camelCase() từ .animate() sử dụng tên camelCased nội bộ và do đó, sẽ lưu trữ các giá trị hiện tại của tài sản bằng cách sử dụng tên camelCased và fx.prop cũng sẽ là tên camelCased .

Answer 4

Quên về jQuery $.animate(), thay vào đó hãy sử dụng $.velocity(). Velocity.js là phần mở rộng hoạt ảnh của jQuery. Nó sử dụng cú pháp tương tự như jQuery và cho phép bạn tạo hiệu ứng CSS3 như chuyển đổi 3D, dịch, xoay, mờ màu, chuyển tiếp, nghiêng, ... Bất kỳ điều gì bạn muốn. Và vì nó đủ thông minh để sử dụng CSS3 thay vì JS khi có thể, nó hoạt hình với hiệu năng tốt hơn. Tôi không hiểu tại sao jQuery không làm điều này!

http://julian.com/research/velocity/