Javascript 浏览器缩放时ScaleX()的问题
在浏览器中放大时,scaleX()属性不保持一致。TranslateX()的工作原理与它应该的完全一样,这就是我伸出援手的原因 我正在用Web动画API和Vanilla JS构建一个分步进度条,目的是在表单中插入一个表单,这样当我们分步完成表单步骤时,动画/步骤将通过它显示进度。 我遇到的问题是在测试ADA合规性时,特别是在放大页面时。更具体地说,只有当缩放百分比不是100的倍数时才可以。因此,100%、200%、300%和400%都能完美工作。但仅举几个例子,110%、125%、250%都存在问题。在屏幕上滑动的圆点正常工作 意外的行为出现在随着圆点在屏幕上扩展的条中,有时它走得太远,有时它走得不够远。真正让我困惑的是,条和点都由相同的测量值“控制”,即取父div的宽度,除以3,然后乘以当前步长。这就是导致我假设问题在scaleX转换中的原因。我仍然在IE中测试这个问题,在chrome和firefox中遇到了这个问题 HTML: JS:Javascript 浏览器缩放时ScaleX()的问题,javascript,accessibility,web-animations-api,Javascript,Accessibility,Web Animations Api,在浏览器中放大时,scaleX()属性不保持一致。TranslateX()的工作原理与它应该的完全一样,这就是我伸出援手的原因 我正在用Web动画API和Vanilla JS构建一个分步进度条,目的是在表单中插入一个表单,这样当我们分步完成表单步骤时,动画/步骤将通过它显示进度。 我遇到的问题是在测试ADA合规性时,特别是在放大页面时。更具体地说,只有当缩放百分比不是100的倍数时才可以。因此,100%、200%、300%和400%都能完美工作。但仅举几个例子,110%、125%、250%都存在
//给出转换的起始值
var slideBarWidth=0,
slideBarScalePoint=0,
currentStep=1,
dot=document.getElementById('progress\uu dot'),
boxWidth=dot.parentElement.offsetWidth;
//将当前步骤编号插入进度点
dot.innerHTML=currentStep;
//将背景点放在条上
对于(变量x=1;x<5;x++){
document.getElementById('circ_u'+x).setAttribute('style','left:'+((boxWidth/3)*(x-1))+'px');
如果(x==4){
document.getElementById('circ_uu'+x).setAttribute('style','left:'+((boxWidth/3)*(x-1))-document.getElementById('circ_uu'+x).offsetWidth)+'px');
}
}
//定义进度点的计时
var dotTiming={
持续时间:500,
填充:“两者”,
放松:“放松”
}
//定义滑杆的正时
var barTiming={
持续时间:500,
填充:“两者”,
放松:“放松”
}
var passedTime={
填写:“两者”
}
//将第一步名称加粗
document.getElementsByClassName('tab-'+currentStep)[0].classList.add('bold');
//单击“激发动画”
document.getElementById('next').addEventListener('click',function(){
//确保滑块不会超出应有的范围
如果(currentStep>3){return;}
//定义进度点的关键帧
如果(currentStep==3){
var moveDot=[
{transform:'translateX(+((boxWidth/3)*(currentStep-1))+'px'),
{transform:'translateX(+((boxWidth/3)*(currentStep))-dot.offsetWidth)+'px'}
];
}否则{
var moveDot=[
{transform:'translateX(+((boxWidth/3)*(currentStep-1))+'px'),
{transform:'translateX(+((boxWidth/3)*(currentStep))+'px')},
];
}
//定义滑动条的关键帧
变量滑块=[
{
转换:“scaleX(+(boxWidth/3)*(currentStep-1))+”),
变换原点:“左”
},
{
转换:“scaleX(+((boxWidth/3)*(currentStep))+”),
变换原点:“左”
}
];
var showDot=[
{背景颜色:'#fff',边框:'2px纯色浅灰色'},
{背景颜色:'darkred',边框:'2px实心darkred'}
];
//将关键帧和计时放在一起(进度点)
var movingDot=document.getElementById(“进度点”).animate(
moveDot,
点定时
);
//将关键帧和计时放在一起(滑动条)
var slidengbar=document.getElementById(“进度填充”).animate(
滑块,
巴蒂明
);
var passingDot=document.getElementById('circ\uuuu'+currentStep)。动画(
showDot,
过期
);
//使动画向前播放
movingDot.playbackRate=1;
slidengbar.playbackRate=1;
passingDot.playbackRate=1;
//启动动画
movingDot.play();
滑动条。播放();
movingDot.onfinish=通过点;
//递增和设置步进计数器
currentStep++;
document.getElementById(“progress\uu dot”).innerHTML=currentStep;
如果(当前步骤>1){
document.getElementById('back').classList.add('is-active');
}
如果(当前步骤>3){
document.getElementById('next').classList.remove('is-active');
}
//切换步骤名称的粗体类
document.getElementsByClassName('tab-'+(currentStep-1))[0].classList.remove('bold');
设置超时(()=>
{
document.getElementsByClassName('tab-'+currentStep)[0].classList.add('bold');
}, 600);
});
document.getElementById('back')。addEventListener('click',function(){
//确保滑块不会回到起始位置
if(currentStep<2){return;}
//定义关键帧
如果(currentStep==4){
var moveDot=[
{transform:'translateX(+((boxWidth/3)*(currentStep-2))+'px'),
{transform:'translateX(+((boxWidth/3)*(currentStep-1))-dot.offsetWidth)+'px)}
];
}否则{
var moveDot=[
{transform:'translateX(+((boxWidth/3)*(currentStep-2))+'px'),
{transform:'translateX(+((boxWidth/3)*(currentStep-1))+'px)}
];
}
变量滑块=[
{
转换:“scaleX(+(boxWidth/3)*(currentStep-2))+”),
变换原点:“左”
},
{
转换:“scaleX(+(boxWidth/3)*(currentStep-1))+”),
来源:l
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My stepped progress bar</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="fonts.css" type="text/css" rel="stylesheet" />
<!-- Web Animation API polyfill-->
<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"></script>
</head>
<body>
<section>
<div class="progress__container">
<div class="progress__bar">
<div id="progress__fill" class="step1"></div>
<div class="circ__container">
<div class="circ" id="circ__1"></div>
<div class="circ" id="circ__2"></div>
<div class="circ" id="circ__3"></div>
<div class="circ" id="circ__4"></div>
</div>
<div id="progress__dot" class="prog__1"></div>
</div>
<div class="backBar"></div>
<div class="flexrow">
<span class="stepName tab-1">Account</span>
<span class="stepName tab-2">Frequency</span>
<span class="stepName tab-3">Amount</span>
<span class="stepName tab-4">Taxes</span>
</div>
<div class="button__container">
<button class="buttonStep" id="back">Back</button>
<button class="buttonStep is-active" id="next">Next</button>
</div>
</div>
</section>
<script src="script-api.js"></script>
</body>
</html>
/* General Styles */
body {
font-family: Arial, helvetica, sans-serif;
}
/* Slider Bar Animation */
#progress__fill {
height:2px;
position: absolute;
top: 7px;
left: 0;
background-color: darkred;
width: 1px;
}
#progress__dot {
background-color: darkred;
color: #fff;
border-radius: 50%;
height: 8px;
width: 8px;
position: absolute;
text-align:center;
line-height: 8px;
padding: 6px;
top: 0;
font-size: 12px;
}
/* Static Bar Elements */
.progress__container {
width: 600px;
margin: 20px auto;
position: relative;
}
.backBar {
height:2px;
width:96%;
position: absolute;
top: 7px;
left: 2%;
background-color: lightgrey;
}
.progress__bar {
z-index: 100;
position: relative;
width: 96%;
margin: 0 auto;
}
.circ {
background-color: #fff;
border: 2px solid lightgrey;
border-radius: 50%;
height: 8px;
width: 8px;
display: inline-block;
position: absolute;
}
.hide {
visibility: hidden
}
.flexrow {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.circ__container {
padding-top: 3px;
}
.flexrow {
margin-top: 20px;
}
.stepName {
font-size: 12px;
text-align: center;
}
.stepName:first-child {
text-align: left;
}
.stepName:last-child {
text-align: right;
}
.stepName.bold {
font-weight: 600;
}
/* Buttons */
.button__container {
padding-top: 100px;
}
.buttonStep {
background: grey;
color: #fff;
padding: 10px 25px;
border-radius: 10px;
font-size: 16px;
}
#back {
float: left;
}
#next {
float: right;
}
.is-active {
background: darkred;
}
// give a starting value for the transformation
var slideBarWidth = 0,
slideBarScalePoint = 0,
currentStep = 1,
dot = document.getElementById('progress__dot'),
boxWidth = dot.parentElement.offsetWidth;
// insert the current step number into the progress dot
dot.innerHTML = currentStep;
// place the background dots on the bar
for (var x = 1; x < 5; x++) {
document.getElementById('circ__' + x).setAttribute('style', 'left: ' + ((boxWidth / 3) * (x - 1)) + 'px');
if (x == 4) {
document.getElementById('circ__' + x).setAttribute('style', 'left: ' + (((boxWidth / 3) * (x - 1)) - document.getElementById('circ__' + x).offsetWidth)+ 'px');
}
}
// define the timing for progress dot
var dotTiming = {
duration: 500,
fill: "both",
easing: 'ease-in-out'
}
// define the timing for sliding bar
var barTiming = {
duration: 500,
fill: "both",
easing: 'ease-in-out'
}
var passedTiming = {
fill: "both"
}
// make the first step name bold
document.getElementsByClassName('tab-' + currentStep)[0].classList.add('bold');
// on click fire the animation
document.getElementById('next').addEventListener('click', function() {
// make sure the slider does not go further than it should
if (currentStep > 3){return;}
// define the keyframes for the progress dot
if (currentStep == 3) {
var moveDot = [
{transform: 'translateX(' + ((boxWidth / 3) * (currentStep - 1)) + 'px)'},
{transform: 'translateX(' + (((boxWidth / 3) * (currentStep)) - dot.offsetWidth) + 'px)'}
];
} else {
var moveDot = [
{transform: 'translateX(' + ((boxWidth / 3) * (currentStep - 1)) + 'px)'},
{transform: 'translateX(' + ((boxWidth / 3) * (currentStep)) + 'px)'},
];
}
// define the keyframes for the sliding bar
var slideBar = [
{
transform: 'scaleX(' + ((boxWidth / 3) * (currentStep - 1)) + ')',
transformOrigin: 'left'
},
{
transform: 'scaleX(' + ((boxWidth / 3) * (currentStep)) + ')',
transformOrigin: 'left'
}
];
var showDot = [
{backgroundColor: '#fff', border: '2px solid lightgrey' },
{backgroundColor: 'darkred', border: '2px solid darkred' }
];
// putting the keyframes and timings together (progress dot)
var movingDot = document.getElementById("progress__dot").animate(
moveDot,
dotTiming
);
// putting the keyframes and timings together (sliding bar)
var slidingBar = document.getElementById("progress__fill").animate(
slideBar,
barTiming
);
var passingDot = document.getElementById('circ__' + currentStep).animate(
showDot,
passedTiming
);
// making the animation play forwards
movingDot.playbackRate = 1;
slidingBar.playbackRate = 1;
passingDot.playbackRate = 1;
// starting the animations
movingDot.play();
slidingBar.play();
movingDot.onfinish = passingDot;
// incrementing and setting the step counter
currentStep++;
document.getElementById("progress__dot").innerHTML = currentStep;
if (currentStep > 1) {
document.getElementById('back').classList.add('is-active');
}
if (currentStep > 3) {
document.getElementById('next').classList.remove('is-active');
}
// toggling the bold class for the step names
document.getElementsByClassName('tab-' + (currentStep - 1))[0].classList.remove('bold');
setTimeout(() =>
{
document.getElementsByClassName('tab-' + currentStep)[0].classList.add('bold');
}, 600);
});
document.getElementById('back').addEventListener('click', function() {
// make sure the slider does not go back past the beginning
if (currentStep < 2){return;}
// define the keyframes
if (currentStep == 4) {
var moveDot = [
{transform: 'translateX(' + ((boxWidth / 3) * (currentStep - 2)) + 'px)'},
{transform: 'translateX(' + (((boxWidth / 3) * (currentStep - 1)) - dot.offsetWidth) + 'px)'}
];
} else {
var moveDot = [
{transform: 'translateX(' + ((boxWidth / 3) * (currentStep - 2)) + 'px)'},
{transform: 'translateX(' + ((boxWidth / 3) * (currentStep - 1)) + 'px)'}
];
}
var slideBar = [
{
transform: 'scaleX(' + ((boxWidth / 3) * (currentStep - 2)) + ')',
transformOrigin: 'left'
},
{
transform: 'scaleX(' + ((boxWidth / 3) * (currentStep -1 )) + ')',
transformOrigin: 'left'
}
];
var showDot = [
{backgroundColor: 'darkred', border: '2px solid darkred' },
{backgroundColor: '#fff', border: '2px solid lightgrey' }
];
// putting the keyframes and timings together
var movingDot = document.getElementById("progress__dot").animate(
moveDot,
dotTiming
);
var slidingBar = document.getElementById("progress__fill").animate(
slideBar,
barTiming
);
var passingDot = document.getElementById('circ__' + currentStep).animate(
showDot,
passedTiming
);
// making the animation reverse
movingDot.playbackRate = -1;
slidingBar.playbackRate = -1;
passingDot.playbackrate = -1;
// starting the animation
movingDot.play();
slidingBar.play();
movingDot.onfinish = passingDot;
// decrementing and setting the step counter
currentStep--;
// set the current step number as the number in the progress dot on the page
document.getElementById("progress__dot").innerHTML = currentStep;
if (currentStep < 4) {
document.getElementById('next').classList.add('is-active');
}
if (currentStep < 2) {
document.getElementById('back').classList.remove('is-active');
}
// toggling the bold class for the step names
document.getElementsByClassName('tab-' + (currentStep + 1))[0].classList.remove('bold');
setTimeout(() =>
{
document.getElementsByClassName('tab-' + currentStep)[0].classList.add('bold');
}, 400);
});
var slideBar = [
{
width: ((boxWidth / 3) * (currentStep - 1)) + 'px'
},
{
width: ((boxWidth / 3) * (currentStep)) + 'px'
}
];
var slideBar = [
{
width: ((boxWidth / 3) * (currentStep - 2)) + 'px'
},
{
width: ((boxWidth / 3) * (currentStep -1 )) + 'px'
}
];