我想滚动浏览一个故事,但让用户按(空格)键进入下一个短语。我认为这可能是网站上一个漂亮的可选介绍。
已完成:我已经设法在用户按下(空格)时滚动字符串数组:
代码笔:https://codepen.io/anon/pen/PbRLdp
react /JS:
var strings = ["Hi","it's not easy finding a freelancer, is it?", "referrals don't always come", "you need to know it'll get done", "I get it.", "perhaps we should connect"];
var i = 0;
var hitElement = document.querySelector( '.storylines' );
document.body.onkeyup = function(e) {
if( e.keyCode == 32 ) {
addHit();
}
}
var addHit = function() {
if ( i+2 <= strings.length) {
i++
renderStories();
}
}
var renderStories = function() {
hitElement.innerHTML = strings[i];
}
HTML:
<span class="storylines">press (spacebar)</span>
我的问题:我如何使用 React 在短语之间创建过渡?我正在考虑向下翻译/淡化当前跨度,并淡化新跨度(不翻译)。
最佳答案
由于我对 reactJS
不是很熟悉,因此我尝试尽可能少地更改您的问题。
我只会通过 css
来完成。这将允许您更改每个过渡的重点,而无需添加太多代码(不透明度 与不透明度和位置)。
var strings = ["Hi", "it's not easy finding a freelancer, is it?", "referrals don't always come", "you need to know it'll get done", "I get it.", "perhaps we should connect"];
var i = 0;
var hitElement = document.querySelector('.storylines');
document.body.onkeyup = function(e) {
if (e.keyCode == 32) {
addHit();
}
}
var addHit = function() {
if (i + 2 <= strings.length) {
i++
renderStories();
}
}
var renderStories = function() {
hitElement.classList.remove('enter');
hitElement.classList.add('hide');
setTimeout(function() {
hitElement.innerHTML = strings[i];
hitElement.classList.remove('hide');
hitElement.classList.add('enter');
}, 250);
}
.storylines {
display: inline-block;
transition: opacity 250ms linear 150ms;
opacity: 0;
}
.storylines.hide {
transition: all 250ms linear;
transform: translateY(15px);
opacity: 0;
}
.storylines.enter {
opacity: 1;
}
<span class="storylines enter">press (spacebar)</span>
注意:点击Expand snippet
不让空格键滚动 stackoverflow 页面 :-)
这是逻辑流程:
- 页面以
storylines
类和enter
类开始。
This is to have the 1st element already shown.
- 发生变化时,去掉
enter
类,添加hide
类,使类离开。
hide will make sure the element disappears and moves down. enter is removed so it won't override the
opacity
of the element.Also,
hide
contains a differenttransition
that will animate all changes. This allows thetransform
to also move the element on exit.
- 超时后,添加
enter
类并移除hide
类
Here, since we remove the
hide
class, thetransition
changes to animate only opacity. So, the element appears in place instead of moving up or down.
注意 enter 动画作为一个delay 值添加,因此它不会与 hide 动画同时发生。
过渡:不透明度 250ms 线性
150ms
;
此外,您可以仅使用 css 更改动画,我认为这是一种很好的 Angular 色分离。
关于css - react 性感过渡 : Animate new text on keypress,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40992481/