Edit in JSFiddle

var viewModel = {
    items: ko.observableArray([]),
    fadeIn: function (element) {
        if (element.nodeType === 1) {
            $(element).hide().fadeIn("slow");
        }
    },
    addItem: function () {
        viewModel.items.push("sample item");
    }
};

ko.applyBindings(viewModel);

<h2>use if</h2>
<div data-bind="if: items().length > 0">
    <ul data-bind="foreach:{ data: items, afterAdd: fadeIn }">
        <li data-bind="text: $data"></li>
    </ul>
</div>

<h2>use visible</h2>
<div data-bind="visible: items().length > 0">
    <ul data-bind="foreach: { data: items, afterAdd: fadeIn }">
        <li data-bind="text: $data"></li>
    </ul>
</div>

<button data-bind="click: addItem">Add Item</button>