由javascript创建的css动画[关闭]

Posted 2023-03-06

【中文标题】由javascript创建的css动画[关闭]

【英文标题】：css animations created by javascript [closed]

【发布时间】：2015-02-24 04:56:11

【问题描述】：

我正在尝试在按下按钮时创建一个带有 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');
);

有什么想法吗？

谢谢

附言在一个稍微不相关的注释上，我可以在#timer 上覆盖内容还是不可能？

【问题讨论】：

javascript 可以很好地创建 div，是 CSS 搞砸了。

css 也可以，但是当 js 创建 div 时它不起作用。

我猜你的浏览器和我的不一样。并且 javascript 和 CSS 都坏了。

【参考方案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');
);

【讨论】：

谢谢你从这里破解它

【参考方案2】：

我会通过 JavaScript 为 svg 的 path 元素设置动画。

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

Demo on CodePen

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;

<svg id="svg">
  <path id="timer" fill="lightseagreen" />
</svg>