Làm cách nào để kích hoạt hoạt ảnh CSS3 (webkit) bằng javascript?

Im thực sự bị mắc kẹt. Tôi muốn có một hình ảnh động CSS tôi đã tạo (bên dưới) để kích hoạt khi nhấp vào một div. Cách duy nhất tôi nghĩ rằng tôi có thể làm điều đó là sử dụng javascript để tạo ra một sự kiện onClick. Tuy nhiên tôi không biết làm thế nào để chạy/refrence các hình ảnh động đó là trong tập tin css của tôi. Ai giúp tôi với?Làm cách nào để kích hoạt hoạt ảnh CSS3 (webkit) bằng javascript?

Đây là hoạt ảnh trong tệp css của tôi mà tôi muốn chạy bằng cách nhấp vào một div.

@-webkit-keyframes colorchange { 
0% { 
    background-color: red; 
    opacity: 1.0; 
    -webkit-transform: scale(1.0) rotate(0deg); 
} 
33% { 
    background-color: blue; 
    opacity: 0.75; 
    -webkit-transform: scale(1.1) rotate(-5deg); 
} 
67% { 
    background-color: green; 
    opacity: 0.5; 
    -webkit-transform: scale(1.1) rotate(5deg); 
} 
100% { 
    background-color: red; 
    opacity: 1.0; 
    -webkit-transform: scale(1.0) rotate(0deg); 
} 
}

Tôi thậm chí đã thử đặt css trong cùng một tệp với javascript (index.html) và sử dụng mã sau để thử và kích hoạt khi nhấp, nhưng không may mắn.

<script> 
function colorchange(test) 
{ 
test.style.webkitAnimationName = 'colorchange '; 
} 
</script>

Xin vui lòng giúp :)

Nguồn

2010-12-05 user531192

Bạn đang thiếu thời gian và bạn có một không gian cuối trong tên bạn gán:

function colorchange(test) 
{ 
    test.style.webkitAnimationName = 'colorchange'; // you had a trailing space here which does NOT get trimmed 
    test.style.webkitAnimationDuration = '4s'; 
}

Một số infos thêm về @-webkit-keyframes:
http://webkit.org/blog/324/css-animation-2/

cập nhật

Một số mã hoạt động.

<html> 
    <head> 
    <style> 
    @-webkit-keyframes colorchange { 
    0% { 
     background-color: red; 
     opacity: 1.0; 
     -webkit-transform: scale(1.0) rotate(0deg); 
    } 
    33% { 
     background-color: blue; 
     opacity: 0.75; 
     -webkit-transform: scale(1.1) rotate(-5deg); 
    } 
    67% { 
     background-color: green; 
     opacity: 0.5; 
     -webkit-transform: scale(1.1) rotate(5deg); 
    } 
    100% { 
     background-color: red; 
     opacity: 1.0; 
     -webkit-transform: scale(1.0) rotate(0deg); 
    } 
    } 
    </style> 

    <script> 
    function colorchange(e) { 
     if (e.style.webkitAnimationName !== 'colorchange') { 
      e.style.webkitAnimationName = 'colorchange'; 
      e.style.webkitAnimationDuration = '4s'; 

      // make sure to reset the name after 4 seconds, otherwise another call to colorchange wont have any effect 
      setTimeout(function() { 
       e.style.webkitAnimationName = ''; 
      }, 4000); 
     } 
    } 
    </script> 
    </head> 

    <body> 
     <div onclick="colorchange(this)">Hello World!</div> 
    </body> 
</html>

Nguồn

2010-12-05 13:15:13

Cảm ơn điều đó, tôi không thấy dấu cách phía sau. Nhưng tôi vẫn có vấn đề. nếu tôi làm điều này ví dụ: test.style.height = "50px"; nó sẽ hoạt hình và hoạt động, tuy nhiên nếu tôi thử gọi một hoạt ảnh tùy chỉnh mà tôi đã xác định trước bằng cách thực hiện điều này: test.style.webkitAnimationName = 'colorchange'; không có gì hiệu quả cả. Bất kỳ ý tưởng về điều đó? – user531192

Bạn đã đặt thời lượng? Nó sẽ không hoạt động nếu không có. Tôi đã thử nghiệm các công cụ cục bộ với CSS của bạn ở trên và nó hoạt động. –

Vâng tôi có thời lượng và hoạt ảnh hoạt động tốt nếu tôi chỉ định nó cho một di chuột qua. Nhưng tôi chỉ không thể làm cho nó hoạt động khi tôi thử sử dụng javascript onclick để làm cho nó chơi. (các công việc onclick). Bạn đã làm cho nó hoạt động với một onclick? – user531192

Làm cách nào để kích hoạt hoạt ảnh CSS3 (webkit) bằng javascript?

Trả lời

Các vấn đề liên quan