Есть ли способ установить from
или to
ключевого кадра webkit с JavaScript?
Установите ключевой кадр webkit из/в параметр с помощью JavaScript
Ответ 1
Решение рода:
var cssAnimation = document.createElement('style');
cssAnimation.type = 'text/css';
var rules = document.createTextNode('@-webkit-keyframes slider {'+
'from { left:100px; }'+
'80% { left:150px; }'+
'90% { left:160px; }'+
'to { left:150px; }'+
'}');
cssAnimation.appendChild(rules);
document.getElementsByTagName("head")[0].appendChild(cssAnimation);
Просто добавляет определение стиля в заголовок. Было бы намного чище/лучше определить его, хотя DOM, если это возможно.
Изменить: ошибка в Chrome со старым методом
Ответ 2
Вы можете использовать интерфейс CSS DOM. Например:
<html>
<body>
<style>
@keyframes fadeout {
from { opacity:1; }
to { opacity:0; }
}
</style>
<script text="javascript">
var stylesheet = document.styleSheets[0];
var fadeOutRule = stylesheet.cssRules[0];
alert( fadeOutRule.name ); // alerts "fadeout"
var fadeOutRule_From = fadeOutRule.cssRules[0];
var fadeOutRule_To = fadeOutRule.cssRules[1];
alert( fadeOutRule_From.keyText ); // alerts "0%" ( and not "from" as you might expect)
alert( fadeOutRule_To.keyText ); // alerts "100%"
var fadeOutRule_To_Style = fadeOutRule_To.style;
alert( fadeOutRule_To_Style.cssText ); // alerts "opacity:0;"
fadeOutRule_To_Style.setProperty('color', 'red'); // add the style color:red
fadeOutRule_To_Style.removeProperty('opacity'); // remove the style opacity
alert( fadeOutRule_To_Style.cssText ); // alerts "color:red;"
</script>
</body>
</html>
Ответ 3
То, как я обрабатываю это, заключается в том, чтобы не устанавливать стиль или элемент стиля, который я манипулирую в файле css, и перед запуском анимации я установлю стиль элемента, с которым он должен перейти с помощью javascript. Таким образом, вы можете динамически управлять тем, что нужно делать, пока мы не сможем управлять этим непосредственно в js. Вам нужно только указать один из двух. SetTimeout позволяет применять правило css к элементу до запуска анимации, иначе у вас будет состояние гонки, и оно не будет анимироваться.
#someDiv.slideIn {
-webkit-animation: slideIn 0.5s ease;
}
@-webkit-keyframes slideIn {
0% {
left:0px;
}
100% {}
}
var someDiv = document.getElementById('someDiv');
someDiv.style.left = '-50px';
setTimeout(function(){
someDiv.addClass('slideIn');
},0);
Ответ 4
В этом примере рассматриваются несколько разных браузеров:
var keyFramePrefixes = ["-webkit-", "-o-", "-moz-", ""];
var keyFrames = [];
var textNode = null;
for (var i in keyFramePrefixes){
keyFrames = '@'+keyFramePrefixes[i]+'keyframes cloudsMove {'+
'from {'+keyFramePrefixes[i]+'transform: translate(0px,0px);}'+
'to {'+keyFramePrefixes[i]+'transform: translate(1440px'
'px,0px);}}';
textNode = document.createTextNode(keyFrames);
document.getElementsByTagName("style")[0].appendChild(textNode);
}
Ответ 5
Чтобы решить эту проблему, я добавил "анимационное имя webkit" в мой селектор CSS, а затем создал отдельные правила для моих опций, в моем примере красная и желтая раскраска:
.spinner {
-webkit-animation-name: spinnerColorRed;
}
@-webkit-keyframes spinnerColorRed {
from {
background-color: Black;
}
to {
background-color: Red;
}
}
@-webkit-keyframes spinnerColorYellow {
from {
background-color: Black;
}
to {
background-color: Yellow;
}
}
Затем с помощью jQuery:
$("#link").click(function(event) {
event.preventDefault();
$(".spinner").css("-webkit-animation-name", "spinnerColorYellow");
});