Javascript、接続style.displayとstyle.transitionで問題

Question

私はdivのスワップに少し問題があります。私はdiv aからdiv bへの遷移に少しアニメーションを追加したいと思いますが、わかるように、それはうまくいきません。 私はvanilla javascriptを学習しています。jQueryを使いたくありません。

私が悪いことを教えてください。

function onHover(id1,id2){ 
 
    let div = document.getElementById(id1); 
 
    let div2 = document.getElementById(id2); 
 

 
    div.style.transition = "background 0.5s ease-in"; 
 
    div.style.backgroundColor = "yellow"; 
 

 
    if(div.style.display == "block"){ 
 
    div.style.display = "none"; 
 
    div2.style.display = "block"; 
 
    }else{ 
 
     div.style.display = "block"; 
 
     div2.style.display = "none"; 
 
    } 
 
}

#a { 
 
    display:block; 
 
    width:100px; 
 
    height:100px; 
 
    background-color:red; 
 
} 
 

 
.bb { 
 
    display:none; 
 
    width:100px; 
 
    height:100px; 
 
    background-color:blue; 
 
}

<div id="a" onmouseover="onHover('a','b')" >aaaa</div> 
 
<span id="b" class="bb" onmouseout="onHover('a','b')">bbb</span>

Answer 1

私はあなたが次のアプローチを試みることができると思います。

var divA = document.querySelector('#a'); 
 
var text1 = "this is the text one."; 
 
var text2 = "this is the text two."; 
 
divA.innerHTML = text1; 
 

 
function swap(e) { 
 
    var elem = e.target; 
 
    elem.innerHTML = 
 
    elem.innerHTML === text1 ? text2 : text1; 
 
    if (elem.classList.contains('blue')) { 
 
    elem.classList.remove('blue'); 
 
    } else { 
 
    elem.classList.add('blue'); 
 
    } 
 
}; 
 

 
divA.addEventListener('mouseover', swap);

.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    transition: all .7s ease; 
 
} 
 

 
.blue { 
 
    background: blue; 
 
}

<div id="a" class="box"></div>