使用CSS和Velocity JS淡入内联块

Question

I'm using Velocity JS to fade a list object.

The problem is that Velocity applies display: list-item; opacity: 1; to the element and overrides my display: inline-block; and my list is now vertical.

How can I force it to always use inline-block?

https://jsfiddle.net/01qvqmxa/

HTML

<ul class="myList">
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

CSS

li {
  opacity: 0;
  display: inline-block;
  padding: 1em;
}

JS

$(".myList li").velocity("fadeIn", { delay: 300, duration: 2000 });

Answer 1

Try using the !important notation:

li {
  opacity: 0;
  display: inline-block !important;
  padding: 1em;
}

revised fiddle