:not() selector incompatible with -webkit-transition

by jessehattabaugh

HTML

<ul class="accordion">
    <li>Foo
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis leo sit amet justo vulputate volutpat. Suspendisse potenti. Aliquam aliquet justo ut turpis suscipit adipiscing.</p>
    </li>
    <li class="open">Baz
        <p>Ut velit magna, sagittis at blandit accumsan, vestibulum et dolor. Aliquam elit ante, congue vel pharetra ut, ultricies non est. In hac habitasse platea dictumst. Donec velit ligula, sodales a imperdiet non, sagittis id mauris.</p>
    </li>
    <li>Bar
        <p>Cras sit amet gravida lacus. Nulla consequat molestie nunc nec fermentum. Donec lobortis pretium quam sit amet scelerisque.</p>
    </li>
</ul>

CSS

.accordion{
    width: 300px;
}

.accordion li{
    overflow: hidden;
    padding: 5px;
    /* uncomment this line and see what happens */
    /*-webkit-transition: height 1s;*/
}

.accordion li.open{
    color: red;
    border: 1px outset grey;
}

.accordion li:not(.open){
    color: blue;
    border: 1px inset grey;
    height: 1em;
}

.accordion li p{
    color: grey;
}

JavaScript

$('.accordion').delegate('li', 'click', function(li){
    $(this).toggleClass('open');
});