css - react 性感过渡 : Animate new text on keypress

Question

我想滚动浏览一个故事，但让用户按(空格)键进入下一个短语。我认为这可能是网站上一个漂亮的可选介绍。

已完成:我已经设法在用户按下(空格)时滚动字符串数组:

代码笔: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 在短语之间创建过渡？我正在考虑向下翻译/淡化当前跨度，并淡化新跨度(不翻译)。

Answer 1

由于我对 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 页面 :-)

这是逻辑流程:

1. 页面以 storylines 类和 enter 类开始。

This is to have the 1st element already shown.

1. 发生变化时，去掉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 different transition that will animate all changes. This allows the transform to also move the element on exit.

1. 超时后，添加enter类并移除hide类

Here, since we remove the hide class, the transition changes to animate only opacity. So, the element appears in place instead of moving up or down.

注意 enter 动画作为一个delay 值添加，因此它不会与 hide 动画同时发生。

过渡:不透明度 250ms 线性150ms;

此外，您可以仅使用 css 更改动画，我认为这是一种很好的 Angular 色分离。