通过CSS自动更改大小按钮

Question

我有用于自动诊断的“步骤手册”，但是我对（可能）CSS自动更改尺寸按钮有一点问题。

当我去时单击第一个序列：您发烧->是->您是否咳嗽->去看医生

接下来，我单击“重置”并执行第二个步骤：发烧->是->您咳嗽吗？这里的按钮比第一次小。

我在代码中犯错误的地方？

/*buttons*/
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
    margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}

的jsfiddle

屏幕

Answer 1

由于您的JavaScript代码中的按钮和容器的尺寸缩小到原始大小的0.8 ，因此按钮和容器整体上正在缩小。

从您的JS中删除此行：

current_fs.css({'transform': 'scale('+scale+')'});

更新的小提琴： http : //jsfiddle.net/nashcheez/bj8pd5op/31/

Answer 2

scale = 1 - (1 - now) * 0.2;

这会使整个字段集缩小到0.8。 您可能添加了缩放效果。

两种解决方案：

• 删除该行（如@nashcheez所述）或将比例设置为1

• 如果您仍然想要使用CSS动画的缩放效果将缩放恢复到其原始大小（即1）

   @keyframe scaleAwayToGlory { 0% { transform: scale(0.8); } 100% { transform: scale(1); } }