animations css créées par javascript

J’essaie de créer une div avec une timer CSS3 animée quand un bouton est enfoncé. voici le code: http://jsfiddle.net/arcco96/y5nov6rz/1/ . Pour une raison quelconque, il ne créera pas le div. Je pense que le code devrait être fonctionnel, mais je ne sais pas si on peut créer une div avec une animation CSS après le chargement de la page.

Mon violon est basé sur celui-ci: http://jsfiddle.net/zbGCq/118/ .

Je crée le div avec:

$("#btn1").click(function(){ jQuery('', { class: 'timer', }).appendTo('#center'); jQuery('', { class: 'mask', }).appendTo('#center'); });

Des pensées?

Merci

ps sur une note légèrement différente, pourrai-je superposer du contenu sur le #timer ou sera-ce impossible?

Vous essayiez de jQuery des objects avant qu’ils n’existent.

le css est toujours cassé dans mon firefox, mais le javascript fonctionne,

Il fait quelque chose d’anime en chrome, je ne sais pas si c’est l’effet que vous voulez ou non.

http://jsfiddle.net/Lbuseo9j/

 var cv = $('.container').width(); $('.head').css({ 'height': (cv / 3) + 'px' }); $("#btn1").click(function () { jQuery('
', { class: 'timer', }).appendTo('#center'); var cw = $('.timer').width(); $('.timer').css({ 'height': cw + 'px' }); jQuery('
', { class: 'mask', }).appendTo('#center'); });

Pour ce faire, svg l’élément de path svg via JavaScript.

Vous pouvez définir la width et la height du minuteur en modifiant la variable width . Vous pouvez également modifier la vitesse d’animation à l’aide de la variable t .

Démo sur CodePen

 var timer = document.getElementById('timer'); var svg = document.getElementById('svg'); var width = 150; svg.setAtsortingbute('width', width); svg.setAtsortingbute('height', width); var t = 5; var theta = 0; var radius = svg.getAtsortingbute('width') / 2; timer.setAtsortingbute('transform', 'translate(' + radius + ',' + radius + ')'); (function animate() { theta += 0.5; theta %= 360; var x = Math.sin(theta * Math.PI / 180) * radius; var y = Math.cos(theta * Math.PI / 180) * -radius; var d = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta > 180) ? 1 : 0) + ',1 ' + x + ',' + y + 'z'; timer.setAtsortingbute('d', d); setTimeout(animate, t) })();

 body { background: #333333; text-align: center; }