How can I make a text transition with innerHTML smooth, with a fade in/out when it changes?

Question

This is my first post so if I'm a bit off on the format of posting or something, please forgive me. So I'm coding a website for a gaming team, and they want their roster (there are boxes that have the player names in them) to expand and give some info when you hover over a name. I've gotten it to expand and change the text, but it looks a bit abrupt. Is there a way to make the text change smoother? I can't have a seperate CSS for each one because there will be at least 20 of them. My progress so far is below. Thanks in advance!

    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>

How about using @keyframes in your CSS? You can use one keyframe to handle a single type of animation for multiple elements. Though the functionality is different, here's an example: https://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load — Will Ward, Feb 08 '19 at 02:02
Thanks for the answer! I have been able to make things fade in and out, I'm just struggling on how to make it fade out, change, and then fade back in. Sorry for the lack of clarity. — GreenCobalt, Feb 08 '19 at 02:11

Somrlik · Accepted Answer · 2019-02-08T02:48:20.043

You cannot (easily) animate change of content - by the same logic, that you cannot animate font-family for example.

You can however overlap the two texts and just change their properties by hovering over a parent element and not using JS.

Demo included.

.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>

This is exactly what I needed! Thanks so much! – GreenCobalt Feb 08 '19 at 02:58 — GreenCobalt, Feb 08 '19 at 02:58

How can I make a text transition with innerHTML smooth, with a fade in/out when it changes?

1 Answers1