問題

これは私の最初の投稿ですので、私が投稿や何かの形式で少しオフになっている場合は、私を許してください。だから私はゲームチームのためのウェブサイトをコーディングしています。彼らは名前の上にマウスを置いたときにいくつかの情報を展開して提供したいと思っています。私はそれを拡大してテキストを変更するようにしましたが、少し突然見えます。テキストをスムーズに変更する方法はありますか?私はそれぞれのために別々のCSSを持つことはできません。私の進歩はこれまでのとこ または

     function replace(element, replacement) {
      element.innerHTML = replacement;
    }

    function unreplace(element, replacement) {
      element.innerHTML = replacement;
    } 
 .box {
  background-color: #81C441;
  display: inline-block;
  margin: 0px 10px;
  text-align: center;
  line-height: 180px;
  width: 200px;
  height: 180px;
  margin-bottom: 20px;
  font-family: arial;
  transition: 1s;
  transform: scale(1.0);
}

.box:hover {
  transition: 1s;
  transform: scale(1.1);
} 
 <div class="boxcontainer">
  <div onmouseover="replace(this, 'ROLE')" onmouseout="unreplace(this, 'NAME')" class="box w3-center w3-animate-top">NAME</div>
</div> 

  ベストアンサー

contentの変更をアニメーション化することはできません。たとえば、font-familyをアニメーション化することはできません。

ただし、2つのテキストを重複させ、JSを使用せずに親要素の上にマウスを置いてプロパティを変更するだけです。

デモが含まれています。

 .wrapper {
   position: relative;
}

.toHide, .toShow {
  transition: opacity 1s ease-in-out;
  position: absolute;
}

.toShow {
  opacity: 0;
}

.wrapper:hover .toHide {
  opacity: 0;
}

.wrapper:hover .toShow {
  opacity: 1;
} 
 <div class="wrapper">
  <span class="toHide">NAME</span>
  <span class="toShow">POSITION</span>
</div>
<br>
<div class="wrapper">
  <span class="toHide">NAME</span>
  <span class="toShow">POSITION</span>
</div>
<br>
<div class="wrapper">
  <span class="toHide">NAME</span>
  <span class="toShow">POSITION</span>
</div>
<br>
<div class="wrapper">
  <span class="toHide">NAME</span>
  <span class="toShow">POSITION</span>
</div> 

  同じタグがついた質問を見る

javascripthtmltransition