修改

Question

我试图使用一些淡入/淡出效果反复显示一些句子。但是，当试图这样做时，似乎单词在中间突破，如下所示。我怎样才能避免断字？

var quotes = document.getElementsByClassName('quote');
var quoteArray = [];
var currentQuote = 0;
quotes[currentQuote].style.opacity = 0;
for (var i = 0; i < quotes.length; i++) {
  splitLetters(quotes[i]);
}
function changeQuote() {
  var cw = quoteArray[currentQuote];
  var nw = currentQuote == quotes.length-1 ? quoteArray[0] : quoteArray[currentQuote+1];
  for (var i = 0; i < cw.length; i++) {
    animateLetterOut(cw, i);
  }
  for (var i = 0; i < nw.length; i++) {
    nw[i].className = 'letter behind';
    nw[0].parentElement.style.opacity = 1;
    animateLetterIn(nw, i);
  }
  
  currentQuote = (currentQuote == quoteArray.length-1) ? 0 : currentQuote+1;
}
function animateLetterOut(cw, i) {
  setTimeout(function() {
		cw[i].className = 'letter out';
  }, 0);
}
function animateLetterIn(nw, i) {
  setTimeout(function() {
		nw[i].className = 'letter in';
  }, 340+(i*30));
}
function splitLetters(quote) {
  var content = quote.innerHTML;
  console.log(quote.innerHTML);
  quote.innerHTML = '';
  var letters = [];
  for (var i = 0; i < content.length; i++) {
    var letter = document.createElement('span');
    letter.className = 'letter';
    letter.innerHTML = content.charAt(i)==' '?'&nbsp;':content.charAt(i);
    quote.appendChild(letter);
    letters.push(letter);
  }
  
  quoteArray.push(letters);
}
changeQuote();
setInterval(changeQuote, 10000);

body {
  font-weight: 600;
  font-size: 40px;
}
.text {
  position: relative;
}
.quote {
  position: absolute;
  opacity: 0;
}
.letter {
  display: inline-block;
  position: relative;
  float: left;
  -webkit-transform: translateZ(25px);
          transform: translateZ(25px);
  -webkit-transform-origin: 50% 50% 25px;
          transform-origin: 50% 50% 25px;
}
.letter.out {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.7s, opacity 0.7s linear;
}
.letter.behind {
  visibility: hidden;
  opacity: 0;
}
.letter.in {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.7s linear;
}

<body>
<div class="text">
  <p>
    <span class="quote">TEXT ONE(1): For example, if you are designing a brand new website for someone, most times you will have to make sure the prototype looks finished by inserting text or photos or what have you. </span>
    <span class="quote">TEXT TWO(2): The purpose of this is so the person viewing the prototype has a chance to actually feel and understand the idea behind what you have created.</span>
  </p>
  
</div>

Answer 1

你的setInterval(changeQuote, 5000)是你巧妙开发的效果的源头。最初我开始使用5000毫秒并将其更改为15000毫秒，大约8000到10000毫秒，这似乎是最好的。

将其更改为setInterval(changeQuote, 9000)并查看差异。

但是，考虑到可伸缩性，您需要找到一种方法来使它成为setInterval等待，直到quoteArray完成推送字母。

修改

根据评论中的反馈，我确定了以下内容：

在JavaScript方面，每个字母都是<span>，意味着每个字母都作为一个单独的元素。缺少的是创造一个词来包围每个句子。这将确保每个单词根据其父容器进行环绕。

在CSS方面，意义为quote的字母容器需要样式，以便更好地表示其内容。通过添加white-space: nowrap，display: block，我设法为其子项提供了一个可根据屏幕宽度进行调整的容器。

请参阅下面提供的代码片段已修复以供参考。

＆＃13;

var quotes = document.getElementsByClassName('quote'),
  quoteArray = [],
  currentQuote = 0;

quotes[currentQuote].style.opacity = 0;

for (var i = 0; i < quotes.length; i++) {
  splitLetters(quotes[i]);
}

function changeQuote() {
  var cw = quoteArray[currentQuote];
  var nw = currentQuote == quotes.length - 1 ? quoteArray[0] : quoteArray[currentQuote + 1];
  for (var i = 0; i < cw.length; i++) {
    animateLetterOut(cw, i);
  }
  for (var i = 0; i < nw.length; i++) {
    nw[i].className = 'letter behind';
    nw[0].parentElement.style.opacity = 1;
    animateLetterIn(nw, i);
  }

  currentQuote = (currentQuote == quoteArray.length - 1) ? 0 : currentQuote + 1;
}

function animateLetterOut(cw, i) {
  setTimeout(function() {
    cw[i].className = 'letter out';
  }, 0);
}

function animateLetterIn(nw, i) {
  setTimeout(function() {
    nw[i].className = 'letter in';
  }, 340 + (i * 30));
}

function splitLetters(quote) {
  var content = quote.innerHTML,
  		words = [],
      word = document.createElement('span');
  
  word.className = "word";
  word.innerHTML = "";
  quote.innerHTML = "";
  
  for (var i = 0; i < content.length; i++) {
    var letter = document.createElement('span');
    letter.className = 'letter';
    
    if(content.charAt(i) !== " "){
    	letter.innerHTML = content.charAt(i);
      word.innerHTML = word.innerHTML.concat(letter.innerHTML);
    }
    else {
    	letter.innerHTML = "&nbsp";
      word.innerHTML = word.innerHTML.concat(letter.innerHTML);
      quote.appendChild(word);
      words.push(word);
      word = document.createElement('span');
      word.className = "word";
    }
  }

  quoteArray.push(words);
}
changeQuote();
setInterval(changeQuote, 10000);

＆＃13;

body {
  font-weight: 600;
  font-size: 40px;
}

.text {
  position: relative;
}

.quote {
  position: absolute;
  display: block;
  opacity: 0;
  white-space: nowrap;
}

.letter {
  display: inline-block;
  position: relative;
  float: left;
  -webkit-transform: translateZ(25px);
  transform: translateZ(25px);
  -webkit-transform-origin: 50% 50% 25px;
  transform-origin: 50% 50% 25px;
}

.letter.out {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.7s, opacity 0.7s linear;
}

.letter.behind {
  visibility: hidden;
  opacity: 0;
}

.letter.in {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.7s linear;
}

＆＃13;

<div class="text">
  <p>
    <span class="quote">TEXT ONE(1): For example, if you are designing a brand new website for someone, most times you will have to make sure the prototype looks finished by inserting text or photos or what have you. </span>
    <span class="quote">TEXT TWO(2): The purpose of this is so the person viewing the prototype has a chance to actually feel and understand the idea behind what you have created.</span>
  </p>
</div>

＆＃13;

避免单词分裂

1 个答案:

修改