由javascript创建的css动画

Question

我正在尝试按下按钮时在其中创建一个带有css3动画计时器的div。下面是代码：http://jsfiddle.net/arcco96/y5nov6rz/1/。由于某种原因，它不会创建div。我认为代码应该是可用的，但我不确定是否可以在页面加载后创建带有css动画的div。

我的小提琴基于这一个：http://jsfiddle.net/zbGCq/118/。

我正在创建div：

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

有什么想法吗？

感谢

P.S。在一个稍微不相关的说明上，我可以在#timer上叠加内容，还是不可能？

Answer 1

你试图在它们存在之前jquery对象。

我的firefox中的css仍然坏了，但javascript正在运行，

它用铬做了一些动画，我不知道你想要的效果是不是。

http://jsfiddle.net/Lbuseo9j/

var cv = $('.container').width();
$('.head').css({
    'height': (cv / 3) + 'px'
});

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

    var cw = $('.timer').width();
    $('.timer').css({
        'height': cw + 'px'
    });

    jQuery('<div/>', {
        class: 'mask',
    }).appendTo('#center');
});

Answer 2

我会通过JavaScript动画svg的{​​{1}}元素来实现此目的。

您可以通过更改path变量来设置计时器的width和height。您还可以通过width变量更改动画速度。

的 Demo on CodePen

t

var timer = document.getElementById('timer');
var svg = document.getElementById('svg');
var width = 150;
svg.setAttribute('width', width);
svg.setAttribute('height', width);
var t = 5;
var theta = 0;
var radius = svg.getAttribute('width') / 2;
timer.setAttribute('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.setAttribute('d', d);
  setTimeout(animate, t)
})();

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