Установите параметр webkit-keyframes из / в с помощью JavaScript - PullRequest
Новая
       2

Установите параметр webkit-keyframes из / в с помощью JavaScript

19 голосов
/ 25 июля 2010

Есть ли способ установить from или to ключевого кадра webkit с помощью JavaScript?

Ответы [ 5 ]

11 голосов
/ 17 ноября 2012

Вы можете использовать интерфейс 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>
11 голосов
/ 26 июля 2010

Сортировка: 

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 со старым методом

5 голосов
/ 08 декабря 2014

Этот пример охватывает несколько разных браузеров: 

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);
}
4 голосов
/ 05 июля 2011

Способ, которым я справляюсь с этим, состоит в том, чтобы не задавать стиль элемента from или to, которым я манипулирую в файле 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);
1 голос
/ 12 июня 2011

Чтобы решить эту проблему, я добавил «имя анимации 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");
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...