css @keyframes를 사용하여 원의 기본 애니메이션을 만들었습니다. 자바 스크립트를 사용하여 원 안을 클릭하여 애니메이션 시작/정지를 트리거합니다.deleteRule CSSKeyframesRule 메서드는 IE11의 동작을 혼동합니다.
는 애니메이션 자체는 5 (루프) 단계로 나눌 수 있습니다 :
일시 정지 - 확장 - 일시 정지 수축 - 일시 정지을
내가 달성하고자하는 목표는 (아래 @keyframes CSS의 섹션을 참조) 결국 애니메이션 기간을 설정하고 키 프레임 값을 변경할 수 있습니다 (예 : 일시 중지 및 확장/축소 기간에 대한 입력 필드가 있으므로 세부 사항은이 질문의 범위와 관련이 없습니다). 이 작업을 수행하기 위해 JavaScript 함수를 조합하여 작동 방법을 테스트하기 위해 onload으로 설정했습니다.
내 HTML :
<!doctype html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link rel="stylesheet" href="style.css">
<script src = "animation.js"></script>
</head>
<body onload=setAnimationDuration(1,1)>
<div id="circle" class='circle-paused' onclick=cssAnimation()></div>
</body>
</html>
내 CSS :
#circle {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.circle-paused {
width: 9%;
padding-top: 9%;
border-radius: 50%;
background-color: #800080;
margin: auto;
}
.circle-animated {
/* 2 sec pause 4 sec expand_shrink*/
width: 9%;
padding-top: 9%;
-webkit-animation-name: my-circle; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 12s; /* Safari 4.0 - 8.0 */
animation-name: my-circle;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
border-radius: 50%;
margin: auto;
}
@keyframes my-circle {
0% {background-color: #800080; width: 9%; padding-top: 9%;}
33.3% {background-color: #D8BFD8; width: 28%; padding-top: 28%;}
50% {background-color: #D8BFD8; width: 28%; padding-top: 28%;}
83.3% {background-color: #800080; width: 9%; padding-top: 9%;}
100% {background-color: #800080; width: 9%; padding-top: 9%;}
}
내 자바 스크립트 :
function cssAnimation() {
if (document.getElementById('circle').className == 'circle-paused') {
document.getElementById('circle').className = 'circle-animated'
} else {
document.getElementById('circle').className = 'circle-paused'
}
}
function findKeyframes(animation_name) {
// get list of current keyframe rules
var style_sheet = document.styleSheets;
for (var i = 0; i < style_sheet.length; ++i) {
for (var j = 0; j < style_sheet[i].cssRules.length; ++j) {
// type 7 correspond to CSSRule.KEYFRAMES_RULE, for more info see https://developer.mozilla.org/en-US/docs/Web/API/CSSRule
if (style_sheet[i].cssRules[j].type == 7 && style_sheet[i].cssRules[j].name == animation_name) {
return style_sheet[i].cssRules[j];
}
}
}
// keyframe rules were not found for given animation_name
return null;
}
function getPercentage(total, fraction) {
// Returns what percentage the fraction is from total
// The result is rounded to 1 decimal place
return Math.round(((100/total) * fraction) * 10)/10;
}
function setAnimationDuration(pause, expand_shrink) {
var total_animation_duration = (pause * 2) + (expand_shrink * 2)
var pause_percentage = getPercentage(total_animation_duration, pause)
var expand_shrink_percentage = getPercentage(total_animation_duration, expand_shrink)
var pause1 = pause_percentage + expand_shrink_percentage;
var shrink = pause1 + expand_shrink_percentage;
var frame_percentage_list = [0, expand_shrink_percentage, pause1, shrink, 100]
var key_frame_list = findKeyframes('my-circle')
var new_rule_list = []
var to_be_removed_key_list = []
//create array of new rules to be inserted
//collecting old keys of rules to be deleted
for(var i = 0; i < key_frame_list.cssRules.length; i++) {
var current_rule = key_frame_list.cssRules[i].cssText
to_be_removed_key_list.push(key_frame_list.cssRules[i].keyText)
new_rule_list.push(current_rule.replace(/[+-]?([0-9]*[.])?[0-9]+%/, frame_percentage_list[i] + '%'))
}
// delete old rules
for(var i = 0; i < to_be_removed_key_list.length; i++) {
key_frame_list.deleteRule(to_be_removed_key_list[i])
}
// populate new ruels
for(var i = 0; i < new_rule_list.length; i++) {
key_frame_list.appendRule(new_rule_list[i])
}
document.getElementById('circle').style.animationDuration = total_animation_duration + "s"
}
문제 자체 :
코드는 FireFox (55.0.3), Chrome (61.0) 및 Safari (11.0)에서 예상대로 작동합니다. 그러나 IE11에서 테스트를 시작했을 때 key_frame_list.deleteRule('rule_key')이 Invalid argument 오류를 발생시키는 것을 발견했습니다. 이 문제를 조사하는 동안 this article (IE 문제를 해결하지는 못했지만 CSS 애니메이션의 전반적인 이해를 향상 시켰습니다). MSDN에서 deleteRule에 관한 두 개의 참조를 찾으 셨습니다 : one 및 two. the second one에서 나는 무엇을 의미하는지 정말로 이해하지 못했지만, :
키는 0과 1 사이의 숫자로 해결되어야합니다. 그렇지 않으면 규칙이 무시됩니다.
IE에서 문자열 키 대신 deleteRule에 색인을 전달해야한다고 가정했습니다. 그래서 나는 IE 콘솔에서 내 가정을 확인하려고했습니다.
key_frame_list.deleteRule(0) -
key_frame_list.deleteRule(1) (0 %입니다) 첫 번째 규칙을 제거 - 제거합니다
var key_frame_list = findKeyframes('my-circle')
key_frame_list.cssRules.length => 5
key_frame_list.deleteRule(0)
key_frame_list.cssRules.length => 4
key_frame_list.deleteRule(1)
key_frame_list.cssRules.length => 3
key_frame_list.deleteRule(0)
key_frame_list.deleteRule(1)
key_frame_list.deleteRule(2)
...
key_frame_list.cssRules.length => 3
어떤 일이 일어나고 것은 : 여기에 내가 발견 한 것입니다 (주어진 내 JS 코드는 온로드에) (100 %) 마지막 규칙 그 후
상관없이 내가 key_frame_list.deleteRule()에 전달하는 인덱스 key_frame_list.cssRules.length 3.
내 기대 내가 key_frame_list.deleteRule(0)으로 재발 할 수 있어야하고, 제거이었다 남아있는 모든 규칙 (각 규칙 삭제 후 인덱스가 바뀔 것으로 예상했기 때문에).
지금, 나는 이해하고 싶습니다
가 무엇 IE에서deleteRule를 사용하는 적절한 방법 (기본적으로 '? 내가 뭔가 잘못하고 있는가')이다
- (또는 다른 방법을 사용할 필요가있는 경우) ?
- 5 개 중 2 개 이상을 삭제할 수없는 이유는 무엇입니까?
- Firefox, Chrome 및 IE11에서 동일한 인수로 작동 할 수있는이 방법에 적합한 방법이 있습니까?