css 数字转换成字符串_快速提示：使用CSS和JS进行单字符转换

css 数字转换成字符串

If you are looking for an interesting effect for your next project then today’s quick tip should be of interest to you. We’re going to look at individually transforming characters inside a sentence. Our code example uses jQuery to navigate through your selected sentence and trigger an animation on each letter. However, all animations run through CSS animations rather than jQuery itself.

如果您正在寻找下一个项目的有趣效果，那么今天的快速提示应该对您有所帮助。 我们将研究句子中各个字符的转换。 我们的代码示例使用jQuery浏览所选句子并在每个字母上触发动画。 但是，所有动画都通过CSS动画而不是jQuery本身运行。

入门 (Getting Started)

To get this up and running we need jQuery. Once we’ve got jQuery sorted, we can add our JavaScript functions inside the document.ready() function.

要启动并运行它，我们需要jQuery。 对jQuery进行排序后，可以将JavaScript函数添加到document.ready()函数中。

jQuery(document).ready(function() {
    // Further code to go in here
});

We only need basic markup to get this working. Inside our HTML file, we add any text we want and then add the .sentence class followed by a basic button.

我们只需要基本的标记就可以正常工作。 在我们HTML文件中，添加所需的任何文本，然后添加.sentence类，后跟一个基本按钮。

<h1 class="sentence title">Fancy Slide In Text</h1>
<h3 class="sentence subtitle">Embrance the fanciness!</h3>
<div class="button">Click to Animate</div>

准备句子 (Preparing Your Sentences)

Our example looks for all elements that have the class .sentence. Once we have these items, we loop through each character of their text value and create our substring, extracting one character at a time from our sentence. Each sentence is wrapped with a <span> so they can be individually animated later.

我们的示例查找具有.sentence类的所有元素。 拥有这些项目后，我们将遍历其text值的每个字符并创建我们的子字符串，一次从句子中提取一个字符。 每个句子都用<span>包裹起来，以便以后可以分别进行动画处理。

We also test to see if a character is blank (e.g. if it contains whitespace such as " "). We ignore these, as we are only interested in animating in actual characters.

我们还测试了字符是否为空(例如，是否包含空格，例如" " )。 我们忽略这些，因为我们只对动画中的角色感兴趣。

Once we are done with all of the characters, we return our new content back to our sentence, replacing our standard plain text with characters wrapped in <span> tags.

完成所有字符后，我们将新内容返回到句子中，用包裹在<span>标记中的字符替换标准纯文本。

// Go through a sentence, wrap its characters with spans
function setUpCharacters() {
  var $sentences = $('.sentence');

  // Run for each sentence
  $sentences.each(function() {
    var $sentence = $(this);
    var newContent = '';

    // Go through all characters of the sentence
    for (i = 0; i < $sentence.text().length; i++) {
      var substring = $sentence.text().substr(i, 1);

      // If we have a character, wrap it
      if (substring != " ") {
        newContent += '<span>' + substring + '</span>';
      } else {
        newContent += substring;
      } 
    }

    // Replace content
    $sentence.html(newContent); 
  });
}

setUpCharacters();

触发动画 (Triggering Your Animations)

This is the fun part. This is where we loop through all of our .sentence elements and <span> children and activate them. This function doesn’t actually do any animation itself, all it does is add an .active class to the elements. Once we have this active state, we can apply a CSS animation to perform whatever fanciness we dream of!

这是有趣的部分。 这是我们遍历所有.sentence元素和<span>子代并激活它们的地方。 这个函数实际上并没有做任何动画，它所做的.active向元素添加一个.active类。 一旦具有活动状态，就可以应用CSS动画来执行我们梦dream以求的幻想！

// Go through a sentence and trigger activate state
function triggerCharacters() {
  var sentenceCounter = 0;
  var sentenceDelay = 600;

  $('.sentence').each(function() {
    var $sentence = $(this);

    // Trigger for each sentence
    setTimeout(function() {
      var $spans = $sentence.find('span');
      var spanCounter = 0;
      var spanDelay = 75;

      // Loop through all spans and activate
      $spans.each(function() {
        var $span = $(this);

        // Trigger a timeout so each span is offset
        setTimeout(function() {
          $span.toggleClass('active');
        }, (spanCounter * spanDelay));

        spanCounter++; 
      });
    }, (sentenceCounter * sentenceDelay));

    sentenceCounter++;
  });
}

// For our example, trigger character animations on button click
$('.button').on('click', function() {
  triggerCharacters();
});

Let’s break down what exactly is happening here:

让我们分解一下这里到底发生了什么：

• In our effect, one sentence will be faded in after an initial delay to give a staggered look. We will be setting an initial delay for each sentence to be 600ms. This is used by our outer setTimeout() function.

  在我们的效果中，一句话会在最初的延迟后淡出，以呈现交错的外观。 我们将每个句子的初始延迟设置为600ms。 这由我们的外部setTimeout()函数使用。

• We find and loop through all .sentence elements and grab their <span> children. We assign a new delay, this time for the individual span characters as they are triggered. This will allow each span to activate separately.

  我们找到并遍历所有.sentence元素，并抓住它们的<span>子级。 我们为每个跨度字符分配一个新的延迟，这是因为它们被触发了。 这将允许每个跨度分别激活。

• The inner setTimeout() function will trigger, executing each <span> as required.

  内部setTimeout()函数将触发，并根据需要执行每个<span> 。

• For our example, we want to trigger this effect when we press a button. To do so, we look for our .button element and trigger our triggerCharacters() function accordingly. You could easily bound this to another element or when the page loads, it’s up to you.

  对于我们的示例，我们想在按下按钮时触发此效果。 为此，我们寻找.button元素并相应地触发我们的triggerCharacters()函数。 您可以轻松地将此绑定到另一个元素，或者在页面加载时由您自己决定。

动画本身 (The Animations Themselves)

We apply basic styling to each span of the sentence and then apply the animation only when we have a span with the .active class.

我们将基本样式应用于句子的每个跨度，然后仅在具有.active类的跨度时应用动画。

.sentence span {
  opacity: 0;
  position: relative;
  display: inline-block;
}
.sentence span.active {
  animation: bounceUp 600ms ease 0ms 1 normal both;
}

Here we apply a fancy looking CSS animation to each of the <span> elements. What we’re doing is translating the position of the element up, down and then finally back to its original position.

在这里，我们将精美CSS动画应用于每个<span>元素。 我们正在做的是向上，向下转换元素的位置，然后最终返回其原始位置。

/* Bounce top in */
@keyframes bounceUp {
  0% {
    transform: translate3d(0px, 0px, 0px);
    opacity: 0;
  }
  50% {
    transform: translate3d(0px, -50px, 0px);
    opacity: 0.7;
  }
  80% {
    transform: translate3d(0px, 20px, 0px);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
  }
}

When the button is pressed, the first sentence will activate and all of its successive <span> elements will animate in. After a short delay, the subsequent .sentence elements will activate too and their <span> children will follow.

当按下按钮时，第一个句子将被激活，并且其所有连续的<span>元素将被激活。短暂的延迟后，后续的.sentence元素也将被激活，并且它们的<span>子元素也将随之激活。

我们的动画在行动 (Our Animation In Action)

Here’s a CodePen that showcases how you can get this to work. Feel free to have a look an fork it to create your own cool effects and animations!

这是一个CodePen，展示了如何使它工作。 随意查看它，以创建自己的炫酷效果和动画！

See the Pen Animating single characters in a string by SitePoint (@SitePoint) on CodePen.

请参见CodePen上的SitePoint ( @SitePoint )在Pen中对单个字符进行笔动画 处理 。

辅助功能注意事项 (Accessibility Considerations)

Since we’re effectively splitting sentences into characters, there’s a chance that screen readers will have difficulty reading the full words. To stop this, we can tell screen readers what our original sentence was using the aria-label attribute on our element. We then use aria-hidden="true" on each of our <span> tags to hide those individual elements from screen readers. This way, screen readers should still be able to read out our animated sentence and should ignore our individual <span> elements.

由于我们将句子有效地分解为字符，因此屏幕阅读器有可能难以阅读完整的单词。 为了阻止这种情况，我们可以使用元素上的aria-label属性告诉屏幕阅读器我们的原始句子是什么。 然后，我们在每个<span>标记上使用aria-hidden="true" ，以向屏幕阅读器隐藏这些单独的元素。 这样，屏幕阅读器仍然应该能够读出我们的动画句子，并且应该忽略我们单独的<span>元素。

Our final markup after being affected by JavaScript would look like so:

受JavaScript影响后，我们的最终标记如下所示：

<h1 class="sentence title" aria-label="Fancy Slide In Text">
  <span class="active" aria-hidden="true">F</span>
  <span class="active" aria-hidden="true">a</span>
  <span class="active" aria-hidden="true">n</span>
  <span class="active" aria-hidden="true">c</span>
  <span class="active" aria-hidden="true">y</span> 
  <span class="active" aria-hidden="true">S</span>
  <span class="active" aria-hidden="true">l</span>
  <span class="active" aria-hidden="true">i</span>
  <span class="active" aria-hidden="true">d</span>
  <span class="active" aria-hidden="true">e</span> 
  <span class="active" aria-hidden="true">I</span>
  <span class="active" aria-hidden="true">n</span> 
  <span class="active" aria-hidden="true">T</span>
  <span class="active" aria-hidden="true">e</span>
  <span class="active" aria-hidden="true">x</span>
  <span class="active" aria-hidden="true">t</span>
</h1>

翻译自: https://www.sitepoint.com/how-to-perform-single-character-transforms-with-css-and-js/

css 数字转换成字符串