javascript - 通过 javascript 应用宽度时如何使 css 转换发生

Question

我正在使用 telerik 控件构建一个简单的表单。

表单将有 3 个按钮。

1. 100 美元按钮
2. 50 美元按钮
3. 其他按钮

第一个和第二个按钮是实际的 RadButtons

    <telerik:RadButton ID="Donate100" runat="server" Text="$100" Width="70" CssClass="" Visible="true" OnClick="Donate100_Click"></telerik:RadButton>
    <telerik:RadButton ID="Donate50" runat="server" Text="$50" Width="70" CssClass="" Visible="true" OnClick="Donate50_Click"></telerik:RadButton>

第三个“按钮”只是一个样式看起来像按钮的输入框

<telerik:RadNumericTextBox ID="Other" Width="70" runat="server" Type="Currency" DisplayText="Other" Visible="true" OnTextChanged="Other_TextChanged">
    <ClientEvents OnFocus="Focus" />
</telerik:RadNumericTextBox>

当用户关注“其他按钮”时，我调用一个 javascript 函数来扩展按钮的宽度。

<script type="text/javascript">
    function Focus(sender, eventArgs) {

        document.getElementById("Other_wrapper").style.width = "400px";
    }
</script>

这非常有效。我唯一缺少的是如何进行过渡。我希望从较短的 70 像素宽度过渡到 400 像素需要 1.5 秒。

这是否需要通过切换 css 类来完成？而不是使用 javascript 手动设置宽度？或者我能以某种方式将转换添加到我的 javascript 函数中吗？后者将是理想的。

Answer 1

仅使用 Javascript 即可。但由于可维护性问题，也不推荐。

var wrapper = document.getElementById("Other_wrapper");
wrapper.style.transition = 'width 1.5s ease';
wrapper.style.width = '70px';

function Focus(sender, eventArgs) {
  wrapper.style.width = "400px";
}

最好使用带有 css 样式的类。

//CSS
#Other_wrapper {
  width: 70px;
  transition: width 1.5s ease;
}
.expand {
  width: 400px;
}
//JS
function Focus(sender, eventArgs) {
  document.getElementById("Other_wrapper").className += " expand";
}