在第一个脚本完成后运行第二个JavaScript脚本 - 动画文本效果

Question

我正在使用这种未来主义风格的文本效果，并希望创建这样的效果：

首先它应该动画短语：

测试短语

之后在此短语后添加一个单词，例如：

狗 猫

所以最后一句话是：

测试短语狗

或

测试短语猫

第一个短语只会动画化一次，第二个短语将互换，首先显示狗，然后显示猫，然后重复。

我目前找到了一种解决方法，即使用 CSS 使第二个短语在一段时间后出现，但这不是理想的情况。是否可以在JavaScript中设置它？

此外，由于某种原因，第二个短语，当它第一次出现时，它前面没有空格，使其像：

测试短语猫

这可能是什么原因呢？

// Futuristic Resolving/Typing Text Effect
// Copyright (c) by Kevin (https://codepen.io/qkevinto/pen/WQVNWO)
// License (MIT): https://choosealicense.com/licenses/mit/
var resolver = {
resolve: function resolve(options, callback) {
// The string to resolve
var resolveString = options.resolveString || options.element.getAttribute('data-target-resolver');
var combinedOptions = Object.assign({}, options, { resolveString: resolveString });
function getRandomInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
function randomCharacter(characters) {
return characters[getRandomInteger(0, characters.length - 1)];
};
function doRandomiserEffect(options, callback) {
var characters = options.characters;
var timeout = options.timeout;
var element = options.element;
var partialString = options.partialString;
var iterations = options.iterations;
setTimeout(function () {
if (iterations >= 0) {
var nextOptions = Object.assign({}, options, { iterations: iterations - 1 });
// Ensures partialString without the random character as the final state.
if (iterations === 0) {
element.textContent = partialString;
} else {
// Replaces the last character of partialString with a random character
element.textContent = partialString.substring(0, partialString.length - 1) + randomCharacter(characters);
}
doRandomiserEffect(nextOptions, callback);
} else if (typeof callback === "function") {
callback();
}
}, options.timeout);
};
function doResolverEffect(options, callback) {
var resolveString = options.resolveString;
var characters = options.characters;
var offset = options.offset;
var partialString = resolveString.substring(0, offset);
var combinedOptions = Object.assign({}, options, { partialString: partialString });
doRandomiserEffect(combinedOptions, function () {
var nextOptions = Object.assign({}, options, { offset: offset + 1 });
if (offset <= resolveString.length) {
doResolverEffect(nextOptions, callback);
} else if (typeof callback === "function") {
callback();
}
});
};
doResolverEffect(combinedOptions, callback);
}
/* Some GLaDOS quotes from Portal 2 chapter 9: The Part Where He Kills You
* Source: http://theportalwiki.com/wiki/GLaDOS_voice_lines#Chapter_9:_The_Part_Where_He_Kills_You
*/ };
var strings = [
'Test phrase '];
var counter = 0;
var options = {
// Initial position
offset: 0,
// Timeout between each random character
timeout: 5,
// Number of random characters to show
iterations: 10,
// Random characters to pick from
characters: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'x', 'y', 'x', '#', '%', '&', '-', '+', '_', '?', '/', '\', '='],
// String to resolve
resolveString: strings[counter],
// The element
element: document.querySelector('[data-target-resolver]')
// Callback function when resolve completes
};function callback() {
setTimeout(function () {
counter++;
if (counter >= strings.length) {
counter = 0;
}
var nextOptions = Object.assign({}, options, { resolveString: strings[counter] });
resolver.resolve(nextOptions, callback);
}, 100000000);
}
resolver.resolve(options, callback);

// Futuristic Resolving/Typing Text Effect
// Copyright (c) by Kevin (https://codepen.io/qkevinto/pen/WQVNWO)
// License: (MIT) https://choosealicense.com/licenses/mit/
var resolver = {
resolve: function resolve(options, callback) {
// The string to resolve
var resolveString = options.resolveString || options.element.getAttribute('data-target-resolver2');
var combinedOptions = Object.assign({}, options, { resolveString: resolveString });
function getRandomInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
function randomCharacter(characters) {
return characters[getRandomInteger(0, characters.length - 1)];
};
function doRandomiserEffect(options, callback) {
var characters = options.characters;
var timeout = options.timeout;
var element = options.element;
var partialString = options.partialString;
var iterations = options.iterations;
setTimeout(function () {
if (iterations >= 0) {
var nextOptions = Object.assign({}, options, { iterations: iterations - 1 });
// Ensures partialString without the random character as the final state.
if (iterations === 0) {
element.textContent = partialString;
} else {
// Replaces the last character of partialString with a random character
element.textContent = partialString.substring(0, partialString.length - 1) + randomCharacter(characters);
}
doRandomiserEffect(nextOptions, callback);
} else if (typeof callback === "function") {
callback();
}
}, options.timeout);
};
function doResolverEffect(options, callback) {
var resolveString = options.resolveString;
var characters = options.characters;
var offset = options.offset;
var partialString = resolveString.substring(0, offset);
var combinedOptions = Object.assign({}, options, { partialString: partialString });
doRandomiserEffect(combinedOptions, function () {
var nextOptions = Object.assign({}, options, { offset: offset + 1 });
if (offset <= resolveString.length) {
doResolverEffect(nextOptions, callback);
} else if (typeof callback === "function") {
callback();
}
});
};
doResolverEffect(combinedOptions, callback);
}
/* Some GLaDOS quotes from Portal 2 chapter 9: The Part Where He Kills You
* Source: http://theportalwiki.com/wiki/GLaDOS_voice_lines#Chapter_9:_The_Part_Where_He_Kills_You
*/ };
var strings = [
'cat',
'dog'];
var counter = 0;
var options = {
// Initial position
offset: 0,
// Timeout between each random character
timeout: 5,
// Number of random characters to show
iterations: 10,
// Random characters to pick from
characters: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'x', 'y', 'x', '#', '%', '&', '-', '+', '_', '?', '/', '\', '='],
// String to resolve
resolveString: strings[counter],
// The element
element: document.querySelector('[data-target-resolver2]')
// Callback function when resolve completes
};function callback() {
setTimeout(function () {
counter++;
if (counter >= strings.length) {
counter = 0;
}
var nextOptions = Object.assign({}, options, { resolveString: strings[counter] });
resolver.resolve(nextOptions, callback);
}, 3000);
// }, 3000);
}
// setTimeout(resolver.resolve(options, callback), 5000);
resolver.resolve(options, callback);

.second-line {
-webkit-animation: appear 2.5s ease-out;
animation: appear 2.5s ease-out; }
@keyframes appear {
0% {
opacity: 0;
display: none;
position: absolute; }
80% {
opacity: 0;
display: none;
position: absolute; }
100% {
opacity: 1; } }

<h1><span data-target-resolver></span><span data-target-resolver2 c class="second-line"></span></h1>

Answer 1

对于空间问题，您可以在span之间添加一个不间断的空格 ( (，并删除/忽略脚本中的空格。

对于函数调用的链接(1=解析"测试短语"，2=解析"Cat"等(，您可以将解析 2 的resolve调用放在 1 (resolver.resolve(options, callback)的回调函数中。这将在第一句完成动画处理后被调用。(并完全删除CSS动画。