React sexy transition：按键上的动画新文本

Question

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

已经完成： 当用户按下 (space):

时，我已经设法滚动浏览字符串数组

反应/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

在你的最后一个函数上试试这个：

var renderStories = function() {
  hitElement.style.opacity = 0;
  setTimeout(function(){
    hitElement.innerHTML = strings[i];  
    hitElement.style.opacity = 1;
  }, 600);
}

你的 CSS:

.storylines {
  transition: all 0.6s;
  opacity: 1;
}

JS 超时应该正好是您的 CSS 元素的过渡时间。

编辑：翻译

var renderStories = function() {
  hitElement.style.opacity = 0;
  hitElement.style.transform = "translateY(-100%)";
  setTimeout(function(){
    hitElement.innerHTML = strings[i];  
    hitElement.style.opacity = 1;
    hitElement.style.transform = "translateY(0%)";
  }, 600);
}

CSS

.storylines {
  transition: all 0.6s;
  opacity: 1;
  display: block; /* the element needs to be seen as solid */
}

编辑 2：更改位置，使新行出现在同一位置：

var renderStories = function() {
  hitElement.style.opacity = 0;
  hitElement.style.transform = "translateY(-100%)";
  setTimeout(function(){
    hitElement.style.trasition = "opacity 0.3s, transform 0s"
    hitElement.style.transform = "translateY(0%)";
  }, 300);
  setTimeout(function(){
    hitElement.innerHTML = strings[i];  
    hitElement.style.opacity = 1;
    hitElement.style.trasition = "opacity 0.3s, transform 0.3s"
 }, 600);
}

CSS:

.storylines {
  transition: opacity 0.3s, transform 0.3s;
  opacity: 1;
  display: block; /* the element needs to be seen as solid */
}

如果你想让它变慢，请确保 600 是 0.3 或 300 的两倍，无论你要更改什么值。

Answer 2

由于我对 reactJS.

不太熟悉，因此我尽量少更改您的问题

我只会 css。这将允许您更改每个过渡的重点，而无需添加太多代码（opacity 与 opacity 和 placement）。

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 不让空格键滚动 Whosebug 页面 :-)

这是逻辑流程：

页面开头为storylinesclass和enterclass.

This is to have the 1st element already shown.

发生变化时，去掉enterclass，加上hideclass，使class离开。

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.

超时后，添加 enter class 和删除 hide class

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.

NOTICE enter 动画作为 delay 值添加，因此它不会与 hide 动画同时发生.

transition: opacity 250ms linear 150ms;

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

React sexy transition：按键上的动画新文本

React sexy transition: Animate new text on keypress

css

transition

reactjs