AngularJS ng-class after：active或：focus

Question

我有一个表单，我正在尝试使用CSS创建一个中途“材料”的感觉。我通过完全抛弃股票引导形式并重写它们来获得最大的灵活性，从而实现了很多动画。

编辑：忘记链接Codepen - http://codepen.io/h3xc0ntr0l/pen/ONwdLm

基本上，“表单组”设置为position:relative并用于绝对定位输入和几个伪元素，yada yada。我正在使用angular，并且无法将jquery合并到项目中。

我的问题如下

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

这没有我需要的行为。我想如果我有“ng-model”，那么那里的任何东西都会评估为真。

我还尝试了以下scss：

  .-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;
    &:active, &:focus{
      .in-email &{ //
        &:before{
          top: -50%;
          color: transparent;
          border-bottom: transparent;
        }
      }             
    }
  }

通过

实现效果

.in-email, .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, .5);
    }
 } 

在我离开悬停后，无论是否有任何内容，我都无法想到任何可能阻止跨度回落的事情。有人有任何提示吗？

(function(){
  angular.module('app').controller([
    '$scope', function($scope){
      $scope.user = undefined;
    }
  ]);
})();

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

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css"/>
<script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

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