onTheInternet onTheInternet - 2 months ago 5
CSS Question

How can I make make css transition happen when applying width through javascript

I am using telerik controls to build a simple form.

The form will have 3 buttons.

  1. 100 Dollar Button

  2. 50 Dollar Button

  3. Other button

The first and second button are actual 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>

And the third 'button' is just an input box that is styled to look like a button

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

When the user focuses on the 'other button' I call a javascript function that expands the width of the button.

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

document.getElementById("Other_wrapper").style.width = "400px";

This works perfectly. The only thing that I'm missing is how to do the transition. I'd like it to take 1.5 seconds to transition from the shorter width of 70px to 400px.

Does this need to be done via switching the css class? Instead of setting width manually with javascript? Or can I somehow add the transistion to my javascript function. The latter would be ideal.


It's possbile with just Javascript. But it's also not recommended because of the maintainability issue.

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";

Using a class styled with css is prefered.

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