CODEWITHSUNDEEP
javascripthtmlcss
Tobi
Tobi

Reputation: 365

Changing Character Width from Current Size to Zero using CSS

I have a character that I want to shrink (in this case horizontally) to zero when its clicked.

If, however, I start with from { width: 1em; } in my keyframes animation, it doesnt start with the characters individual width but the general font size, which may be wider, and will therefore cause all text to shift to the opposite direction at first.

How can I assign the starting width to be the actual width of the character?

const app = document.getElementById("clickMe");
app.innerHTML =
  "Click Me"
    .split("")
    .map(function (char) {
      return (
        '<span class="character" onclick="clickEvent(this)">' +
        char +
        "</span>"
      );
    })
    .join("")

function clickEvent(char) {
    char.classList.add("character-clicked");
}
.character {
  font-size: xx-large;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
}

.character-clicked {
  animation-name: shrink;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes shrink {
  from {
    width: 1em;
  }
  to {
    width: 0px;
  }
}
<div id="clickMe"/>

.

Upvotes: 0

Views: 102

Answers (1)

Temani Afif
Temani Afif

Reputation: 274225

Use max-width instead and make sure you consider a value bigger than the font. Your 1em will do the job here

const app = document.getElementById("clickMe");
app.innerHTML =
  "Click Me"
    .split("")
    .map(function (char) {
      return (
        '<span class="character" onclick="clickEvent(this)">' +
        char +
        "</span>"
      );
    })
    .join("")

function clickEvent(char) {
    char.classList.add("character-clicked");
}
.character {
  font-size: xx-large;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
}

.character-clicked {
  animation-name: shrink;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes shrink {
  from {
    max-width: 1em;
  }
  to {
    max-width: 0px;
  }
}
<div id="clickMe"/>

Upvotes: 2

Related Questions