Question

我的转变，好吧，不会过渡。

https://gist.github.com/TadahTech/0915cd6fc22fa27a94a4

我完全不确定为什么没有发生转变，但我认为它是一个简单的答案。我一直盯着这个问题太长时间了，希望能在这个问题上留下一些新的眼光。

section.progress-container {
    display: block;
    height: 200px;
    width: 200px;
    margin: 2em auto;
    position: relative;;
}

circle#empty {
    stroke: #EDEDED;
    stroke-width: 2em;
}

circle#percent-loaded {
    transition: stroke-dashoffset 1.6 ease-in;
    transition-delay: 1s;
    stroke: blue;
    stroke-width: 2em;
}

JS

$(function() {

  calculateProgress = function(percentLoaded) {
    var $percentLoadedCircle = $("circle#percent-loaded");

    var radius = $percentLoadedCircle.attr("r");

    var circumference = Math.PI * (radius * 2);

    var arcPercent = ((100 * percentLoaded) / 100);

    var arcLengthOffset = arcPercent * circumference;

    $percentLoadedCircle.css({
      strokeDashoffset: arcLengthOffset
    });
  }
  calculateProgress(100);
});

索引页

<!DOCTYPE html>
<html>
<head>
    <title>Countdown Test Site</title>
    <meta name="viewport" content="width=device-width, initial-scale=0.1" />
    <link rel="stylesheet" type="text/css" media="all" href="css/style.css">
</head>
<body>
    <section class="progress-container">
        <svg height="240" width="240" viewport="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <circle id="empty" r="100" cx="120" cy="120" fill="transparent" stroke-dasharray="629" stroke-dashoffset="0"></circle>
            <circle id="percent-loaded" r="100" cx="120" cy="120" fill="transparent" stroke-dasharray="629" stroke-dashoffset="0"></circle>
        </svg>
    </section>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

    <script type="text/javascript" src="js/app.js"></script></body>
</html>

CSS3没有使用CSS循环进度条转换缓出

0 个答案: