manipulate - javascript rotate animation



Wie setze ich CSS3-Übergang mit Javascript? (4)

Wie kann ich CSS mit Javascript einstellen (ich habe keinen Zugriff auf die CSS-Datei)?

#fade div {
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  -ms-transition: opacity 1s;       
  transition: opacity 1s;
  opacity: 0;
  position: absolute;
  height: 500px;
  width: 960px;
}

Beispielsweise:

document.getElementById('fade').HOW-TO-TYPE-webkit-transition = 'opacity 1s';

Answer #1

Sie sollten die camelCase-Notation wie folgt verwenden:

document.getElementById('fade').style.webkitTransition = 'opacity 1s';

wie jede Eigenschaft, die aus mehr als einem Wort besteht und mit einem Bindestrich getrennt ist (zB css background-position wird zu js backgroundPosition .

Wahrscheinlich hat zu dieser Zeit nicht jeder Browser diese Notation in Eigenschaften übernommen, die moz Präfixe beinhalten, also gibt es einige Browser wie Firefox, die Moz statt moz akzeptieren (siehe https://bugzilla.mozilla.org/show_bug.cgi?id=607381 ).


Answer #2

Sie sollten hier nachsehen: http://www.javascriptkit.com/javatutors/setcss3properties.shtml

Wie Sie sehen können, wenn Sie CSS-Eigenschaften mit "-" setzen, wird das nächste Zeichen als Großbuchstabe ausgegeben:

document.getElementById('fade').style.WebkitTransition = 'opacity 1s';
document.getElementById('fade').style.MozTransition = 'opacity 1s';

Answer #3
function reg(){

var style = document.head.appendChild(document.createElement("style"));

style.innerHTML = "#main:after {border-right:400px solid #fde561; left:0 ; transition : 0.5s all ease}";

}

Answer #4
var vendors = [
    '-webkit-',
    '-o-',
    '-moz-',
    '-ms-',
    ''
];

function toCamelCase(str) {
    return str.toLowerCase().replace(/(\-[a-z])/g, function($1) {
        return $1.toUpperCase().replace('-', '');
    });
}

function setCss3Style(el, prop, val) {
    vendors.forEach(function(vendor) {
        var property = toCamelCase(vendor + prop);

        if(p in el.style) {
            el.style[p] = val;
        }
    });
}

Verwendung :

setCss3Style(someElement, 'transition', 'opacity 1s');

Hier ist eine Live-Demo .





css3