javascript - 单击按钮时使用 css 动画创建径向进度条

Question

我在尝试实现这一目标时遇到了一个大问题。我不明白如何为某些东西制作动画，让它转一圈，所以我从 Circle Progress Bar 抓了一个可以工作的并且我正在尝试找到一种方法来使用 jquery 使它在单击按钮时具有动画效果。我尝试使用 this教程，但不知道如何正确合并它。请帮忙。这是我的 Fiddle虽然它并没有接近工作。

.progress {
    width:200px;
    height:200px;
    background:#fff;
    border:2px solid #000;
    position:relative;
    margin:50px;
    border-radius:50%;
    overflow:hidden;
    transform: translateZ(0px);
    display:inline-block;
}
.activatedAfter {
    -moz-animation:turn 4s linear forwards;
    -webkit-animation:turn 4s linear forwards;
    -moz-animation-delay:4s;
    -webkit-animation-delay:4s;

}
.activated {

    -moz-animation:turn 4s linear forwards;
    -webkit-animation:turn 4s linear forwards;
    -o-animation:turn 4s linear forwards;
    -ms-animation:turn 4s linear forwards;
    animation:turn 4s linear forwards;


}

@-moz-keyframes turn {
    99.9% {
        transform:rotate(180deg);
        background:tomato;
    }
    100% {
        background:#fff;
    }
}
@-webkit-keyframes turn {
   99.9% {
        transform:rotate(180deg);
        background:tomato;
    }
    100% {
        background:#fff;
    }
}
@-o-keyframes turn {
    99.9% {
        transform:rotate(180deg);
        background:tomato;
    }
    100% {
        background:#fff;
    }
}
@-ms-keyframes turn {
   99.9% {
        transform:rotate(180deg);
        background:tomato;
    }
    100% {
        background:#fff;
    }
}
@keyframes turn {
   99.9% {
        transform:rotate(180deg);
        background:tomato;
    }
    100% {
        background:#fff;
    }
}

Answer 1

我在你的 fiddle 中将 $('#progress') 更改为 $('.progress') 因为 'progress' 是一个类而不是 ID。此外，我将 activatedAfter 样式替换为您提供的链接示例中的 activated:after 和 activated:before 样式。

此外，我在代码中添加了 jQuery 库(它不包含在您的 fiddle 中)

试试这个

$('#battleButton').click(function() { 
	$('.progress').addClass('activated activatedAfter');
});

body {
  background-color: #000;
}

.progress {
    width:200px;
    height:200px;
    background:#fff;
    border:2px solid #000;
    position:relative;
    margin:50px;
    border-radius:50%;
    overflow:hidden;
    transform: translateZ(0px);
    display:inline-block;
}
.activated:after {
    position:absolute;
    content:"";
    width:100%;
    height:100%;
    top:0;
    left:-50%;
    background:tomato;
    -moz-animation:turn 4s linear forwards;
    -webkit-animation:turn 4s linear forwards;
    -moz-animation-delay:4s;
    -webkit-animation-delay:4s;
    transform-origin:100% 50%;
    z-index:1;
}
.activated:before {
    position:absolute;
    content:"";
    width:100%;
    height:100%;
    top:0;
    left:50%;
    background:tomato;
    -moz-animation:turn 4s linear forwards;
    -webkit-animation:turn 4s linear forwards;
    -o-animation:turn 4s linear forwards;
    -ms-animation:turn 4s linear forwards;
    animation:turn 4s linear forwards;
    transform-origin:0% 50%;
    z-index:2;
}

@-moz-keyframes turn {
    99.9% {
        transform:rotate(180deg);
        background:tomato;
    }
    100% {
        background:#fff;
    }
}
@-webkit-keyframes turn {
   99.9% {
        transform:rotate(180deg);
        background:tomato;
    }
    100% {
        background:#fff;
    }
}
@-o-keyframes turn {
    99.9% {
        transform:rotate(180deg);
        background:tomato;
    }
    100% {
        background:#fff;
    }
}
@-ms-keyframes turn {
   99.9% {
        transform:rotate(180deg);
        background:tomato;
    }
    100% {
        background:#fff;
    }
}
@keyframes turn {
   99.9% {
        transform:rotate(180deg);
        background:tomato;
    }
    100% {
        background:#fff;
    }
}

button {
  background-color: rgba(0, 0, 0, 0);
  border-color: #81ff14;
  color: #81ff14;
  border-radius: 10%;
  float: right;
  margin-right: 100px;
  margin-top: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress"></div>
<button id="battleButton">Battle</button>