"There is no css animation matching the one you specified" error from cut-and-paste dropdown example

Question

I'm using Semantic 1.4.1 (tried also with 1.6.1) and cut-n-pasted the dropdown example directly from the docs:

<div class="ui selection dropdown">
  <input type="hidden" name="gender">
  <div class="default text">Gender</div>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item" data-value="1">Male</div>
    <div class="item" data-value="0">Female</div>
  </div>
</div>

I get the error

[Error] Transition: There is no css animation matching the one you specified. slide down in 
    error ([native code], line 0)
    error (semantic.js, line 15438)
    animate (semantic.js, line 15438)
    initialize (semantic.js, line 15438)
    (anonymous function) (semantic.js, line 15438)
    each (jquery-1.7.1.min.js, line 2)
    each (jquery-1.7.1.min.js, line 2)
    transition (semantic.js, line 15438)
    show (semantic.js, line 4432)
    show (semantic.js, line 4432)
    focus (semantic.js, line 4432)
    dispatch (jquery-1.7.1.min.js, line 3)
    i (jquery-1.7.1.min.js, line 3)

and the menu doesn't drop down. Tried this on both Safari and Chrome (on OSX).

I'm building 1.4.1 and 1.6.1 from src using gulp build.

Any ideas?

Answer 1

Turns out, it was having the creaky old jquery-1.7.1. Once I upgraded to jquery-1.11.2 (with the migration tool as well), the HTML worked on my site the same way it works on the doc site.

Answer 2

Also try to add prefixes -webkit- to transition.less.

You can use the less autoprefixer to automatically add prefixes to css.