0

display:'none' および display:'block' プロパティを使用して div 表示を切り替えるネイティブ JS ソリューションを探しています。最初の部分ができました。単純なフェードインとフェードアウト アニメーションを実行する部分だけが必要です。

ネイティブ JS と display:block,none を使用する必要があります。

var e = document.getElementById('calendarPickerContainer');

    if (e.className == 'visible') { 
        e.className = 'hidden';
    } else {
        e.className = 'visible';
    }

このCSSに適応する必要があります

.visible{
display:block;
}

.hidden {
display:none;
}
4

4 に答える 4

0

これを簡単にすることができますclassList

document.querySelector('.toggle').addEventListener('click',function(e) {
  e.target.classList.toggle('hide');
})

CSS:

div {
  transition:all 0.3s ease-in;
}

.hide {

  opacity: 0;
}

アニメ化できないのでopacity使っています。display

于 2015-11-27T11:53:07.653 に答える
0

ネイティブ JS フェード機能:

var s = document.getElementById('calendarPickerContainer').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();
于 2015-11-27T11:50:25.063 に答える