のJavascript機能 - 作業溶液

Question

HTML

<div id="notifyProductName"> 

Angualar JS

<a href="" ng-click="cart.addItem(product.name,product.price, 1);cart.ShowItem(product.name)"> 

はJavaScript

cart.prototype.ShowItem = function (productName) 
{ 

    document.getElementById("notifyProductName").innerHTML = productName"; 
    document.getElementById("notifyProductName").fadeOut(400); 
} 

私はHTML形式のメッセージボックスに商品名を表示したいです数秒後にメッセージボックスを消してしまいます。

Answer 1

3秒setTimeout()の機能を設定し、transitionのCSSクラスを使用して、フェードをopacityにします。

cart.prototype.ShowItem = function (productName) 
 
{ 
 
    var el = document.getElementById("notifyProductName"); 
 
    el.innerHTML = productName; 
 
    el.classList.remove('fade'); 
 
    el.classList.add('show'); 
 
    var timeout = setTimeout(function() { 
 
    el.classList.add('fade'); 
 
    }, 3000); 
 
}

.notifyProductName { 
 
    opacity: 0; 
 
} 
 

 
.show { 
 
    opacity: 1; 
 
} 
 

 
.fade { 
 
    opacity: 0; 
 
    transition: opacity .5s; 
 
}

<div id="notifyProductName" class="notifyProductName"></div>