Values ​​Set Webkit Khung hình Sử dụng Javascript Biến

Question

Tôi có một đoạn mã JS để tạo số ngẫu nhiên và xuất chúng như các biến được sử dụng ở đây ở vị trí của luân chuyển giá trị

@-webkit-keyframes rotate { 
    0% {-webkit-transform: rotate(-10deg);} 
    100% {-webkit-transform: rotate(10deg);} 
} 

#dog{ 
/*irrelevant settings*/ 
-webkit-animation: rotate 5s infinite alternate ease-in-out; 
} 

Đoạn mã trên hoạt động tốt tuy nhiên khi Tôi cố gắng để dính các biến từ javascript vào rotate(variable); Tôi không thể làm cho nó hoạt động. Tôi mới làm điều này vì vậy tôi chắc chắn 90% tôi không có cú pháp đúng cho biến (nghiêm túc là tôi rất nhớ nếu có thứ gì đó cần ngoặc đơn, dấu ngoặc kép, v.v ... và tôi đã thử tất cả những gì tôi có thể nghĩ đến) .

Hoặc có thể do biến là cục bộ cho hàm và CSS không thể đọc được.

Vì vậy, về cơ bản tôi chỉ cần một số người lạ để cho tôi biết cú pháp chính xác và cách để có được CSS để đọc biến nếu có thể.

Nếu không có vẻ như tôi sẽ cần các chức năng để tạo ra toàn bộ:

@-webkit-keyframes rotate { 
    0% {-webkit-transform: rotate(-10deg);} 
    100% {-webkit-transform: rotate(10deg);} 
} 

... mà có thể là một chút lộn xộn vì biến ngẫu nhiên có thể sẽ được áp dụng cho nhiều yếu tố css.

Ồ và hiện tại biến được định dạng để bao gồm deg sau số đó sao cho không phải vấn đề. Trong thực tế, vì lợi ích của dễ dàng chỉ giả sử tôi đang sử dụng var dogValue = "20deg"; và quên phần tử ngẫu nhiên.

Cảm ơn.

Answer 1

Được rồi, không phải mã thực sự của bạn trông như thế nào, nhưng bạn không thể ném biến JavaScript vào CSS, nó sẽ không nhận ra chúng.

Thay vào đó, bạn cần tạo quy tắc CSS thông qua JavaScript và chèn chúng vào CSSOM (Mô hình đối tượng CSS). Điều này có thể được thực hiện một vài cách - bạn có thể chỉ cần tạo một hoạt ảnh khung hình chính và thêm nó vào, hoặc bạn có thể ghi đè lên một hình ảnh động hiện có. Vì lợi ích của câu hỏi này, tôi sẽ giả sử bạn muốn liên tục ghi đè lên một hình ảnh động keyframe hiện có với các giá trị xoay khác nhau.

tôi đã đặt lại với nhau (và tài liệu) một JSFiddle để bạn có thể có một cái nhìn tại địa chỉ: http://jsfiddle.net/russelluresti/RHhBz/2/

Nó bắt đầu tắt chạy -10 - xoay hình ảnh động> 10 độ, nhưng sau đó bạn có thể nhấp vào nút để có nó thực hiện một vòng quay giữa các giá trị ngẫu nhiên (giữa -360 và 360 độ).

Ví dụ này đã bị tấn công cùng nhau chủ yếu từ thử nghiệm trước đó do Simon Hausmann thực hiện. Bạn có thể xem mã nguồn ở đây: http://www.gitorious.org/~simon/qtwebkit/simons-clone/blobs/ceaa977f87947290fa2d063861f90c820417827f/LayoutTests/animations/change-keyframes.html (miễn là liên kết đó hoạt động, gitorious khá tệ khi duy trì url).

Tôi cũng đã lấy các mã chức năng randomFromTo JavaScript từ đây: http://www.admixweb.com/2010/08/24/javascript-tip-get-a-random-number-between-two-integers/

Tôi đã thêm tài liệu để các bộ phận của kịch bản Simon Hausmann mà tôi đã lấy từ anh ta (mặc dù tôi đã chút thay đổi họ). Tôi cũng đã sử dụng jQuery chỉ để đính kèm sự kiện nhấp vào nút của tôi - tất cả các tập lệnh khác được viết bằng JavaScript gốc.

Tôi đã thử nghiệm tính năng này cho Chrome 18 và Safari 5.1 và có vẻ như hoạt động tốt trong cả hai trình duyệt.

Hy vọng điều này sẽ hữu ích.

Answer 2

Trong chrome 49 trở đi và Firefox 48 trở đi, bạn có thể tận dụng API Javascript mới element.animate() để đẩy hoạt ảnh khung hình chính của mình.

Vui lòng lưu ý rằng API này là thử nghiệm và không hoạt động trên trình duyệt ngoại trừ những điều đã nói ở trên.

Các giải pháp được phân loại như thêm class hoặc injecting keyframes có thể được tận dụng để tương thích ngược. Một shim cho cùng một không có sẵn ngay lập tức.

giật ví dụ MDN

document.getElementById("tunnel").animate([ 
    // keyframes 
    { transform: 'translateY(0px)' }, 
    { transform: 'translateY(-300px)' } 
], { 
    // timing options 
    duration: 1000, 
    iterations: Infinity 
}); 

tham khảo:

• caniuse.com/#feat=web-animation
• MDN documentation

Answer 3

Đối với bất cứ ai đang tìm kiếm câu trả lời này vào năm 2017 đây là những gì đã thay đổi trong RussellUresti answer.

Trong ví dụ của ông này sẽ không có tác dụng nữa:

keyframes.insertRule("0% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }"); 
keyframes.insertRule("100% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }"); 

Điều này là do .insertRule() là một tên phi tiêu chuẩn. Bây giờ là .appendRule(), do đó, mã RusselsUresti bây giờ sẽ là:

keyframes.appendRule("0% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }"); 
keyframes.appendRule("100% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }"); 

More information on the CSSKeyframeRule can be found here