Xoay chuyển đổi phần tử hoạt ảnh

82

Làm cách nào để xoay một phần tử bằng jQuery .animate()? Tôi đang sử dụng dòng bên dưới, dòng này hiện đang tạo hoạt ảnh độ mờ một cách chính xác, nhưng dòng này có hỗ trợ chuyển đổi CSS3 không?

$(element).animate({
   opacity: 0.25,
   MozTransform: 'rotate(-' + -amount + 'deg)',
   transform: 'rotate(' + -amount + 'deg)'
});
jquery  transform 
— kalpaitch
nguồn
1
Có một plugin jQuery sẽ tạo hiệu ứng chuyển đổi CSS. Hoạt động trên Firefox, Chrome, Safari, Opera và Internet Explorer. github.com/puppybits/QTransform
— dogbits
Đã kết thúc ở đây trong một tìm kiếm có cùng chủ đề và đã tải xuống plugin; hoạt động tốt, nhưng nó gây ra xung đột với hướng dẫn này trong một plugin khác mà tôi đã tạo: $ ("#" + self.id) .css ("biến đổi", "quy mô (1)"); Tôi đã thay đổi dòng này: elem.style [$. CssProps.transform] = val + '%'; về điều này: if (isNaN (val)) elem.style [$. cssProps.transform] = val; else elem.style [$. cssProps.transform] = val + '%'; Nghĩ rằng nó không cần giải thích thêm.
— sergio0983

Câu trả lời:

95

Theo như tôi biết, các hoạt ảnh cơ bản không thể tạo hoạt ảnh cho các thuộc tính CSS không phải là số.

Tôi tin rằng bạn có thể hoàn thành việc này bằng cách sử dụng một hàm bước và biến đổi css3 thích hợp cho trình duyệt của người dùng. Chuyển đổi CSS3 hơi phức tạp để bao phủ tất cả các trình duyệt của bạn (ví dụ: IE6 bạn cần sử dụng bộ lọc Ma trận).

CHỈNH SỬA : đây là một ví dụ hoạt động trong trình duyệt webkit (Chrome, Safari): http://jsfiddle.net/ryleyb/ERRmd/

Nếu bạn chỉ muốn hỗ trợ IE9, bạn có thể sử dụng transformthay thế -webkit-transformhoặc -moz-transformsẽ hỗ trợ FireFox.

Thủ thuật được sử dụng là tạo hiệu ứng cho thuộc tính CSS mà chúng ta không quan tâm ( text-indent) và sau đó sử dụng giá trị của nó trong một hàm bước để thực hiện việc xoay vòng:

$('#foo').animate(
..
step: function(now,fx) {
  $(this).css('-webkit-transform','rotate('+now+'deg)'); 
}
...
— Ryley
nguồn
Đây là một giải pháp đau đầu cả về tốc độ và bảo trì mã. Quên jQuerytrong khi nhập transform, hãy kiểm tra giải pháp của tôi.
— Dyin
Còn nếu bạn có giá trị thay đổi liên tục để xoay, không cố định thì sao?
— edonbajrami
78

Câu trả lời của Ryley rất tuyệt, nhưng tôi có văn bản trong phần tử. Để xoay văn bản cùng với mọi thứ khác, tôi đã sử dụng thuộc tính border-spacing thay vì text-indent.

Ngoài ra, để làm rõ một chút, trong style của phần tử, hãy đặt giá trị ban đầu của bạn:

#foo {
    border-spacing: 0px;
}

Sau đó, trong đoạn hoạt ảnh, giá trị cuối cùng của bạn:

$('#foo').animate({  borderSpacing: -90 }, {
    step: function(now,fx) {
      $(this).css('transform','rotate('+now+'deg)');  
    },
    duration:'slow'
},'linear');

Trong trường hợp của tôi, nó quay 90 độ ngược chiều kim đồng hồ.

Đây là bản demo trực tiếp .

— atonyc
nguồn
3
sử dụng z-index cũng là một lựa chọn tốt nếu bạn không sử dụng nó ở bất kỳ nơi nào khác. nhưng bạn sẽ không muốn tiêu cực về điều đó.
— Sherzod
4
Bạn có thể muốn thêm các phần mở rộng -ms- và -o- cũng (xem css3please.com )
— Joram van den Boezem
Làm thế nào bạn có thể tạo hiệu ứng các thuộc tính bổ sung cùng một lúc?
— MadTurki
@MadTurki, tôi đã viết câu trả lời cho câu hỏi của bạn bên dưới!
— skagedal
5
jQuery thực sự đủ thông minh để thêm tất cả các tiền tố -moz-, -webkit-, v.v. cho bạn, vì vậy bạn có thể đơn giản hóa mã này một chút. câu trả lời rất tốt. +1
— Octopus,
48

Theo tôi, jQuery's animatehơi bị lạm dụng so với CSS3 transition, nó thực hiện hoạt ảnh như vậy trên bất kỳ thuộc tính 2D hoặc 3D nào. Ngoài ra, tôi e rằng, việc để nó vào trình duyệt và bỏ qua lớp có tên JavaScript có thể dẫn đến nguồn CPU dự trữ - đặc biệt, khi bạn muốn bùng nổ với các hình ảnh động. Vì vậy, tôi muốn có các hình ảnh động ở đó định nghĩa kiểu, vì bạn xác định chức năng bằng JavaScript . Bạn càng đưa nhiều bản trình bày vào JavaScript, bạn càng gặp nhiều vấn đề sau này.

Tất cả những gì bạn phải làm là sử dụng addClassphần tử bạn muốn tạo hoạt ảnh, nơi bạn đặt một lớp có transitionthuộc tính CSS . Bạn chỉ cần "kích hoạt" hoạt ảnh , hoạt ảnh này vẫn được triển khai trên lớp bản trình bày thuần túy .

.js

// with jQuery
$("#element").addClass("Animate");

// without jQuery library
document.getElementById("element").className += "Animate";

Người ta có thể dễ dàng loại bỏ một lớp bằng jQuery hoặc loại bỏ một lớp không có thư viện .

.css

#element{
    color      : white;
}

#element.Animate{
    transition        : .4s linear;
    color             : red;
    /** 
     * Not that ugly as the JavaScript approach.
     * Easy to maintain, the most portable solution.
     */
    -webkit-transform : rotate(90deg);
}

.html

<span id="element">
    Text
</span>

Đây là một giải pháp nhanh chóng và tiện lợi cho hầu hết các trường hợp sử dụng.

Tôi cũng sử dụng điều này khi tôi muốn triển khai một kiểu khác (thuộc tính CSS thay thế) và muốn thay đổi kiểu ngay lập tức bằng hoạt ảnh .5s toàn cục. Tôi thêm một lớp mới vào BODY, trong khi có CSS ​​thay thế trong một biểu mẫu như sau:

.js

$("BODY").addClass("Alternative");

.css

BODY.Alternative #element{
    color      : blue;
    transition : .5s linear;
}

Bằng cách này, bạn có thể áp dụng các kiểu khác nhau với hoạt ảnh mà không cần tải các tệp CSS khác nhau. Bạn chỉ liên quan đến JavaScript để đặt a class.

— Dyin
nguồn
1
Điều đó tốt, nhưng nó bị giới hạn ở các trình duyệt hỗ trợ chuyển tiếp CSS3 . Vì vậy, không có IE8 hoặc IE9. Đó là một phân khúc khá lớn để từ bỏ.
— Ryley
11
@Ryley Bạn đang nói về tỷ lệ phần trăm người dùng là 12% . Người dùng IE8 hoặc IE9 dưới 5%. Nó không phải là một phân khúc khá lớn để từ bỏ, vì chúng ta vẫn nói về lớp trình bày chứ không phải chức năng. Khoảng 5% khách truy cập của bạn sẽ không nhìn thấy hoạt ảnh 3D của bạn. Ngoài ra, nếu một trình duyệt (IE) không hỗ trợ transition, nó chắc chắn cũng sẽ không hỗ trợ các phép chuyển đổi của bạn.
— Dyin
Điều đó không hoàn toàn đúng - transformđược hỗ trợ bởi IE9. Nhưng tôi đồng ý rằng đó không phải là nhóm người dùng lớn nhất nên từ bỏ (IE8).
— Ryley
2
@Dyin Đây không phải là 12% cố định, nó phụ thuộc vào nhân khẩu học mục tiêu của bạn. Theo google-analytics, 50% người dùng của công ty tôi đang sử dụng IE8. Điều quan trọng là phải biết khán giả của bạn. Điều đó đang được nói: Bravo dude! Câu trả lời này tốt hơn nhiều so với hai câu hàng đầu. Cách trở thành "viên kim cương trong thô".
— Ziggy
2
Điều này cũng không tính đến các giá trị xoay vòng động.
— Yuschick
19

Để thêm vào câu trả lời của Ryley và atonyc, bạn không thực sự phải sử dụng thuộc tính CSS thực, như text-indexhoặc border-spacing, nhưng thay vào đó, bạn có thể chỉ định thuộc tính CSS giả mạo, như rotationhoặc my-awesome-property. Có thể là một ý tưởng hay nếu sử dụng thứ gì đó không có nguy cơ trở thành thuộc tính CSS thực tế trong tương lai.

Ngoài ra, ai đó đã hỏi làm thế nào để tạo hoạt ảnh cho những thứ khác cùng một lúc. Điều này có thể được thực hiện như bình thường, nhưng hãy nhớ rằng stephàm được gọi cho mọi thuộc tính động, vì vậy bạn sẽ phải kiểm tra thuộc tính của mình, như sau:

$('#foo').animate(
    {
        opacity: 0.5,
        width: "100px",
        height: "100px",
        myRotationProperty: 45
    },
    {
        step: function(now, tween) {
            if (tween.prop === "myRotationProperty") {
                $(this).css('-webkit-transform','rotate('+now+'deg)');
                $(this).css('-moz-transform','rotate('+now+'deg)'); 
                // add Opera, MS etc. variants
                $(this).css('transform','rotate('+now+'deg)');  
            }
        }
    });

(Lưu ý: Tôi không thể tìm thấy tài liệu cho đối tượng "Tween" trong tài liệu jQuery; từ trang tài liệu hoạt ảnh có một liên kết đến http://api.jquery.com/Types#Tween , đây là một phần không 'dường như không tồn tại. Bạn có thể tìm thấy mã cho nguyên mẫu Tween trên Github tại đây ).

— trượt tuyết
nguồn
myRotationProperty là gì ... nó có phải là thứ tùy chỉnh mà bạn đã xác định; và những gì là nowphụ thuộc vào cái này.
— Muhammad Umer
@MuhammadUmer - vâng, myRotationPropertylà một thứ gì đó tùy chỉnh, một thuộc tính CSS "giả mạo". nowlà đối số đầu tiên của hàm gọi lại bước, chỉ định sự thay đổi đối với giá trị thuộc tính ở bước này.
— skagedal
thì bạn cũng khởi tạo thuộc tính này trong css. Hoặc bạn có thể chỉ cần đặt nó hoạt ảnh, nó sẽ không có.
— Muhammad Umer
7

Chỉ cần sử dụng chuyển tiếp CSS:

$(element).css( { transition: "transform 0.5s",
                  transform:  "rotate(" + amount + "deg)" } );

setTimeout( function() { $(element).css( { transition: "none" } ) }, 500 );

Ví dụ, tôi đặt thời lượng của hoạt ảnh là 0,5 giây.

Lưu ý setTimeoutđể loại bỏ thuộc tính transitioncss sau khi hoạt ảnh kết thúc (500 mili giây)

Để dễ đọc, tôi đã bỏ qua các tiền tố của nhà cung cấp.

Giải pháp này yêu cầu sự hỗ trợ chuyển đổi của trình duyệt.

— Paolo
nguồn
Cảm ơn, đã làm việc cho tôi. Bạn cũng quên dấu chấm phẩy đằng sau dấu ngoặc đơn đóng.
— Devin Carpenter
@ Sorrow123444 Tôi rất vui vì nó có hiệu quả với bạn. Tôi đã sửa dấu chấm phẩy bị thiếu, cảm ơn bạn
— Paolo
3

Tôi tình cờ xem được bài đăng này, đang tìm cách sử dụng biến đổi CSS trong jQuery để tạo hoạt ảnh vòng lặp vô hạn. Cái này làm việc tốt cho tôi. Tôi không biết nó chuyên nghiệp đến mức nào.

function progressAnim(e) {
    var ang = 0;

    setInterval(function () {
        ang += 3;
        e.css({'transition': 'all 0.01s linear',
        'transform': 'rotate(' + ang + 'deg)'});
    }, 10);
}

Ví dụ về việc sử dụng: 

var animated = $('#elem');
progressAnim(animated)
— Faradin
nguồn
1 
//this should allow you to replica an animation effect for any css property, even //properties //that transform animation jQuery plugins do not allow

            function twistMyElem(){
                var ball = $('#form');
                document.getElementById('form').style.zIndex = 1;
                ball.animate({ zIndex : 360},{
                    step: function(now,fx){
                        ball.css("transform","rotateY(" + now + "deg)");
                    },duration:3000
                }, 'linear');
            }
— Colin Rickels
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.