css 过渡停止工作 - 两天前工作答案

【问题标题】：css transition stopped working - was working two days agocss 过渡停止工作 - 两天前工作
【发布时间】：2017-05-02 00:06:20
【问题描述】：

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

我有一个容器 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>

【问题讨论】：

尝试从transition: all,400ms,ease-in-out 和其他转换属性声明中删除逗号。
我不认为你的 sass 是有效的，top: -30px; !important 应该是 top: -30px !important;，有几个这样的例子
@Topy 我觉得我快疯了。它与逗号一起使用，我的一些测试确实证实了这一点。无论如何，删除它们修复了它 - 没有什么比用新的眼睛找到那些小虫子了。感谢您的宝贵时间！
!important 应该放在规则的末尾和它后面的; 之间。此外，如果不是规则集中的最后一条规则，则每条规则都应以 ; 结尾。修复这些，你就可以开始了。已发布的(S)CSS 中目前有 4 个无效语法表达式，均在具有important 的规则中。
@AndreiGheorghiu，只是我将 Sass 转换为 css 的错误。别担心，我没那么坏！

标签： javascript jquery html css

【解决方案1】：

Transition 中没有逗号，谢谢 Toby。

【讨论】：

【解决方案2】：

我在所有东西中都使用逗号有一段时间了，它工作得很好，然后就不再工作了......谢谢......

【讨论】：