title: Can't get CSS Transitions to work with ASP.NET
body: <p>So I'm trying to build a web app that has div with a table on the left half of the screen, and a div full of textboxes and stuff for editing objects from the table on the right. On mobile, however, I'm trying to make both divs span 100% of the screen, with the left div appearing first, and if an object in its table is clicked, the div on the right slides over top of it.</p>
  
  <p>Currently, I'm using absolute positioning to get the pages to look right, and I just set the right div's left equal to 100% of the page, and then turn its display to none. And when an object inside left div is clicked, it turns the display of right div to block and sets the left to 0. I've included CSS3 Transitions to try to get this to give a sliding effect. I also have to do all of this in ASP.NET code-behind, since that's what the project is in. So instead of using JQuery to toggle classes, I have to use C# to do it. I don't know if that's causing the problem, and if there's anything I can do about it.</p>
  
  <p>Here's the relevant HTML:</p>
  
  <pre><code>&lt;div class="section admin_body"&gt;
      &lt;div class="container left"&gt;
          [[table and other stuff here]]
      &lt;/div&gt;
      &lt;div class="container right" id="RightContainer" runat="server"&gt;
          [[other stuff here]]
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And some CSS:</p>
  
  <pre><code>.section.admin_body {
      margin: 1rem 0;
      position: relative;
      background: none;
      border: none;
  }
  
  .container.left {
      position: absolute;
      top: 0;
      left: 0;
      width: 99%;
      border: .1em solid #aaa;
      background: #eee;
      border-radius: 3px;
      padding-bottom: 1rem;
      z-index: 1;
  }
  
  .container.right {
      display: none;
      position: absolute;
      top: 0;
      left: 100%;
      width: 99%;
      border: .1em solid #aaa;
      background: #eee;
      border-radius: 3px;
      z-index: 99;
      -webkit-transition: left 2s linear;
      -moz-transition: left 2s linear;
      -o-transition: left 2s linear;
      transition: left 2s linear;
  }
  
  .container.right.selected {
      display: block;
      left: 0;
  }
  </code></pre>
  
  <p>And finally, the C#:</p>
  
  <pre><code>protected internal void LoadCase(object sender, EventArgs e)
  {
      ...
      BindData();
      LoadHeader();
      RightContainer.Attributes.Add("class", "container right selected");
  }
  </code></pre>
  
  <p>I've got everything to work except the CSS transitions part. There's no sliding effect at all. Again, I'm not sure if it's because I'm using C# to Bind Data before I try to mess with the classes that activate the transitions. If anyone has any idea what I'm doing wrong, I'd really appreciate the help!</p>