AngularJS ng-class after :active or :focus
<p>I have a form I am trying to create using CSS to achieve a halfway "material" feel. I achieved a lot of the animations by ditching the stock bootstrap forms entirely and rewriting them to get the maximum amount of flexibility.</p>

<p>EDIT: Forgot to link Codepen - <a href="http://codepen.io/h3xc0ntr0l/pen/ONwdLm" rel="nofollow">http://codepen.io/h3xc0ntr0l/pen/ONwdLm</a></p>

<p>Essentially, the "form groups" are set to <code>position:relative</code> and used to position the input and a couple pseudo elements absolutely, yada yada. I am using angular and am not able to incorporate jquery into the project. </p>

<p>my problem is as follows</p>

<pre><code>&lt;div class="-form-group"&gt;
   &lt;input type="email" class="-form-input" ng-class='{"content":"user.email"}' ng-model="user.email"/&gt;
   &lt;span class="in-email"&gt;&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>this does not have the behavior i need. I guess if I have "ng-model", then whatever is in there is going to evaluate to true.</p>

<p>I also tried the following with scss:</p>

<pre><code>  .-form-input{
    border: none;
    box-shadow: none;
    border-radius: 0;
    font-size: 1rem;
    background: none;
    outline: none;
    width: 100%;
    margin-top: 2em;
    position: relative;
    z-index:4;
    &amp;:active, &amp;:focus{
      .in-email &amp;{ //
        &amp;:before{
          top: -50%;
          color: transparent;
          border-bottom: transparent;
        }
      }             
    }
  }
</code></pre>

<p>the effects are achieved via</p>

<pre><code>.in-email, .in-pwd{
    &amp;:before{
        position: absolute;
        top: 50%;
        left: 0%;
        width: 100%;
        z-index:3;
        color: black;
        transition: 500ms ease all;
        border-bottom: 1.5px solid rgba(128,128,128, .5);
    }
 } 
</code></pre>

<p>I can not think of anything else that would prevent the span from coming back down after i leave the hover regardless of whether or not there is any content. does anyone have any tips?</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>(function(){
  angular.module('app').controller([
    '$scope', function($scope){
      $scope.user = undefined;
    }
  ]);
})();</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>form {
  width: 100%;
  padding: 1em;
  border: .25px solid #e9e9e9;
  box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.33);
  height: 20rem;
  margin: 0 auto;
}
form .-form-group {
  position: relative;
  width: 100%;
  height: auto;
  transition: 500ms ease;
  margin: 0 1em 2em 0;
}
form .-form-group .-form-input {
  border: none;
  box-shadow: none;
  border-radius: 0;
  font-size: 1rem;
  background: none;
  outline: none;
  width: 100%;
  margin-top: 2em;
  position: relative;
  z-index: 4;
}
.in-email form .-form-group .-form-input:active:before, .in-email form .-form-group .-form-input:focus:before {
  top: -50%;
  color: transparent;
  border-bottom: transparent;
}
form .-form-group input:-webkit-autofill {
  background-color: #e9e9e9 !important;
}
form .-form-group:after {
  content: "";
  display: block;
  transition: 250ms 500ms ease all;
  border-bottom: 1.5px solid #288690;
  width: 0;
}
form .-form-group:hover:after, form .-form-group:focus:after, form .-form-group:active:after {
  content: "";
  width: 100%;
  top: 90%;
}
form .-form-group:hover .in-email:before, form .-form-group:hover .in-pwd:before, form .-form-group:focus .in-email:before, form .-form-group:focus .in-pwd:before, form .-form-group:active .in-email:before, form .-form-group:active .in-pwd:before {
  top: -50%;
  color: transparent;
  border-bottom: transparent;
}
form .button {
  border-radius: 1px;
  border: none;
}
form .in-email:before, form .in-pwd:before {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 100%;
  z-index: 3;
  color: black;
  transition: 500ms ease all;
  border-bottom: 1.5px solid rgba(128, 128, 128, 0.5);
}

.content:before {
  content: "" !important;
}

.in-email:before {
  content: "Email Address";
}

.in-pwd:before {
  content: "Password";
}

.nav, .pagination, .carousel, .panel-title a {
  cursor: pointer;
}

#ui-root {
  margin-top: 5rem;
  padding: 1rem;
}

.ui-container {
  position: relative;
  width: 100%;
  padding: 0 10% 0 10%;
}

.button {
  background-color: #288690 !important;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css"/&gt;
&lt;script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"&gt;&lt;/script&gt;

&lt;div class="container"&gt;
  &lt;div class="ui-container"&gt;
    &lt;div class="row" id="ui-root"&gt;
      &lt;div class="col-sm-12 col-md-4 col-md-offset-4"&gt;
        &lt;form autocomplete="off" class="text-center"&gt;
          &lt;!-- chrome autcomplete --&gt;
          &lt;div class="-form-group"&gt;
            &lt;input type="email" class="-form-input" ng-class='{"content": "user.email"}' ng-model="user.email"/&gt;
            &lt;span class="in-email"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="-form-group"&gt;
            &lt;input type="password" class="-form-input" ng-class='{"content": "user.password"}' ng-model="user.password" /&gt;
            &lt;span ng-class='{"content": "user.password"}' class="in-pwd"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;button class="btn btn-primary button"&gt;Login&lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>