javascript - css transition 停止工作 - 两天前还在工作

Question

这可能是非常明显的事情，但我迷路了。几天前工作正常 - 没有更改代码。

我有一个容器 div，当使用 jquery 切换一个类时，它会下降，我正在尝试使其过渡以重新开始工作。

我切换的类只改变高度宽度和位置。任何负值都是为了缩小与页面上其他 div 的小间隙。

  $(".me").click(function() {

   if ( $("#ballHolder").hasClass("shown") ) {
      $("#ballHolder").removeClass("shown");
	  } else {

	    $( "#ballHolder" ).addClass( "shown" );
	  }
      $(".foo").fadeToggle("fast");
    // note I am new to JS and JQ //
  });

.shown {
  top: -30px; !important
  height: 300px; !important
  width: 380px; !important
  -webkit-transition: all,400ms,ease-in-out;
  -moz-transition: all,400ms,ease-in-out;
  -ms-transition: all,400ms,ease-in-out;
  -o-transition: all,400ms,ease-in-out;
  transition: all,400ms,ease-in-out;
}
#ballHolder {
  max-width: 480px !important
  height: 105px;
  width: 150px;
  display: block;
  position: absolute;
  margin: 0 auto;
  top: -1px;
  right: 0;
  bottom: auto;
  left: 0;
  
  -webkit-transition: all,400ms,ease-in-out;
  -moz-transition: all,400ms,ease-in-out;
  -ms-transition: all,400ms,ease-in-out;
  -o-transition: all,400ms,ease-in-out;
  transition: all,400ms,ease-in-out;

  @include abs-pos($top: -1px, $right: 0, $left: 0)
  @include transition(all, 400ms, ease-in-out)

  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  
  background-color: grey;
  overflow: hidden;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


  <div class="profile">
    <div class="me"> 

      <div id="ballHolder">
        <!-- there are items in here, code for them works fine -->
          
    </div>
  </div>

Answer 1

Transition 中没有逗号，谢谢 Toby。