HTML を見ると、ページが読み込まれると要素が表示されます。ページの読み込みが完了した後にのみフェードインするようにスタイル設定されていますが、HTML の観点からは、ページが読み込まれている間ずっと「表示」されています。
ページが読み込まれると、次のようになります。
<div id="vi_notification" class="vi-notify-cmp" style="top:25%;">
<div class="vi-notify-container vi-notify-shadow">
<div class="vi-notify-icon vi-notify-icon-img"></div>
<div class="vi-notify-msg">28 people are viewing this item per hour.</div>
<div class="vi-notify-close">
<button id="vi_notification_cls_btn" class="vi-notify- close-btn">x</button>
</div>
</div>
</div>
フェードアウトした後でのみ、スタイリングが display:none に変更されます。
<div id="vi_notification" class="vi-notify-cmp" style="top: 25%; left: 10px; display: none;">
<div class="vi-notify-container vi-notify-shadow">
<div class="vi-notify-icon vi-notify-icon-img"></div>
<div class="vi-notify-msg">28 people are viewing this item per hour.</div>
<div class="vi-notify-close">
<button id="vi_notification_cls_btn" class="vi-notify-close-btn">x</button>
</div>
</div>
</div>
Chrome デベロッパー ツールバーを使用して読み込まれる要素を見ると、要素がどこに「表示」されているかがわかりますが、スタイルが更新されてゆっくりとフェードインするため、人間の目に見えるようになります。
これは、ページが読み込まれている/読み込まれているときに、要素が表示どおりに返されることを意味します。親 div のスタイル設定が display:none に変更されたため、フェードアウトした後、display が false を返すことが予想されます。