JavaScriptでボタンをクリックすると新しく要素を追加するコードを書いてボタンを押すと要素が追加されるんですが、その追加された際のアニメーションを下からふわっとフェードインするようにしたいです。
イメージとして最初は要素が2つある。この最初の2つはふわっとさせられる。
<div class="dlcard effect"></div>
<div class="dlcard effect"></div>
ボタンクリックでdlcadが追加されていく。これが追加される瞬間をふわっとさせたい。
<div class="dlcard effect"></div>
最初はopacityを0にして、translateで下の方にずらしてあります。
.showeffect {
opacity: 0;
transform: translate(0, 45px);
transition: all 500ms;
}
画面が読み込まれた際は下記のコードでふわっと出現するようにしています。
class effect {
constructor(){
this.DOM = {}
this.DOM.showeffects = document.querySelectorAll('.showeffect')
this._addEvent();
}
showUp(){
this.DOM.showeffects.forEach((showeffect) => {
showeffect.style.opacity = 1;
showeffect.style.transform = 'translate(0, 0)';
});
}
_addEvent(){
window.addEventListener("load", this.showUp.bind(this))
}
}
new effect();
画面が読み込まれた際は上手く追加出来たのですが、ボタンをクリックして追加される要素に対してどのようにイベントを割り当てて良いかわかりません。
だいぶ読みづらいコードで恐縮ですが要素を追加するコードを載せておきます。
class AddDLcard {
constructor() {
this.DOM = {};
this.DOM.container = document.querySelector('.add__button');
this.DOM.dlcardWrap = document.querySelector('.dlcardWrap');
this.eventType = this._getEventType();
this._addEvent();
}
_getEventType() {
//スマホで見る場合このプロパティが存在する事になる True False
return window.ontouchstart ? 'touchstart' : 'click';
}
_addEvent() {
// thisを束縛しないとaddEventListerが取得される。ためMobileMenu内の関数なので束縛が必要
this.DOM.container.addEventListener(this.eventType, this._click.bind(this));
}
_click() {
const dlcards = document.querySelectorAll('.dlcard');
this.DOM.dlcard = dlcards[dlcards.length - 1];
let addElement = this.DOM.dlcard.cloneNode(true);
addElement.querySelector('.dlcard__title > .dlcard__videoName').innerText = '';
let thumbnail = addElement.querySelector('.dlcard__thumbnail');
thumbnail.querySelector('img').src = 'images/pinkguy.jpg';
const classNames = thumbnail.querySelector('.dlcard__thumbnail--cover').classList;
let thumbnailClassName = classNames[1];
let dlcardNumber = thumbnailClassName.match(/[0-9]+/)[0];
thumbnail.querySelector('.dlcard__thumbnail--cover').classList.replace(thumbnailClassName, `thumbnail-${Number(dlcardNumber) + 1}`);
addElement.querySelector('.dlcard__url > input').value = '';
addElement.querySelector('.dlcard__url > input').placeholder = 'URL:https://www.youtube.com/watch?v=';
this.DOM.dlcardWrap.appendChild(addElement);
}
}
new AddDLcard();