Question

我有一个＆＃34;步骤手册＆＃34;对于自动诊断，但我（通常）CSS自动更改大小按钮有一点问题。

当我点击第一个序列时：你发烧了吗？＆gt;是的 - ＆gt;你有咳嗽 - ＆gt;去看医生

接下来我点击＆＃34;重置＆＃34;并做第二个序列：你是否发烧 - ＆gt;是的 - ＆gt;你有咳嗽......这里的按钮比第一次小。

我在代码中犯了错误？

/*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

Screens

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);
  } 
}

通过CSS自动更改大小按钮

2 个答案: