如何为更改innerHTML设置动画? [英] How to animate changing innerHTML?

问题描述

有一个小程序，可以将单词动态扩展到任何屏幕高度.它基于innerHTML.当单词改变时，如何使其淡入和淡出?

There's a little program, that dynamically stretches words to any screen height. It is based on innerHTML. How to make it fade in and out, when the word is changing?

let text = document.getElementById("text");
let input = document.getElementById("input");
let svg = document.querySelector("svg");
function changeWord() {
  text.innerHTML = input.value;
  svg.setAttributeNS(null, "viewBox", `-4 0 16 ${text.getComputedTextLength()}`);
}

* {
  padding: 0;
  margin: 0;
}

svg {
  height: 100vh;
  font-family: roboto, sans-serif;
  font-size:16px;
  border:1px solid;
}

input {
  position: fixed;
  top: 0;
  right: 0;
  border: 2px solid red;
}

<svg viewBox="-4 0 16 75">
  <g transform="rotate(90 0 0)">
  <text id="text">Skibpidi</text>
  </g>
</svg>

<input value="Skibidi" oninput="changeWord()" id="input" type="text">

推荐答案

我将添加的字符包装在<tspan>元素中. tspan在css中从fill-opacity:0到fill-opacity:1进行动画处理，以产生淡入效果.请阅读代码中的注释.

I am wrapping the added characters in a <tspan> element. The tspan is animated in css from fill-opacity:0 to fill-opacity:1 for a fade in effect. Please read the comments in the code.

const SVG_NS = "http://www.w3.org/2000/svg";

let text = document.getElementById("text");
let input = document.getElementById("input");
let svg = document.querySelector("svg");
let L; //the number of letters of the input value

function setWord() {
  let vals = input.value.trim().split(""); //trim for the empty spaces at the begining and the end of the string and split into an array
  L = vals.length; //the length of the array == the number of letters
  text.innerHTML = ""; //clear the content of the text element

  // set a variable for the text content
  let textcontent = "";
  vals.forEach((v) => {
    //add each value to the textcontent
    textcontent += v;
  });

  text.textContent = textcontent;
  //reset the viewBox value
  svg.setAttributeNS(
    null,
    "viewBox",
    `-4 0 16 ${text.getComputedTextLength()}`
  );
}

setWord();

function changeWord(e) {
  let vals = input.value.trim().split("");
  if (vals.length == L + 1) {
    // if the user is adding chars to the input
    //create a new element tspan to wrap the new character in
    let tspan = document.createElementNS(SVG_NS, "tspan");
    //set the text content of the tspan element
    tspan.textContent = vals[vals.length - 1];
    //append the tspan to the text element
    text.appendChild(tspan);
    // reset the value of the L
    L += 1;
  } else {
    //if the user is deleting letters
    setWord();
  }
  //reset the viewBox value
  svg.setAttributeNS(
    null,
    "viewBox",
    `-4 0 16 ${text.getComputedTextLength()}`
  );
}

input.addEventListener("input", changeWord);

* {
  padding: 0;
  margin: 0;
}

svg {
  height: 100vh;
  font-family: roboto, sans-serif;
  font-size:16px;
  border:1px solid;
}

input {
  position: fixed;
  top: 0;
  right: 0;
  border: 2px solid red;
}

tspan{
fill-opacity:0;
animation: fo 2s forwards;
}


@keyframes fo{
  to{fill-opacity:1;}
}

<svg viewBox="-4 0 16 75">
  <g transform="rotate(90 0 0)">
  <text id="text">Skibpidi</text>
  </g>
</svg>

<input value="Skibidi" id="input" type="text">

这篇关于如何为更改innerHTML设置动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！