在两个 div 之间创建动画图标答案

【问题标题】：Create animation icons between two divs在两个 div 之间创建动画图标
【发布时间】：2019-09-01 16:56:22
【问题描述】：

我有两个 div 并想使用 reactjs/javascript/css 在它们之间创建一个动画图标，例如 https://parceljs.org/（在此站点中，在字幕和框之间）

我找到了像 react-spring 这样的库，但似乎不是我想要的。谁能进一步帮助我？

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

它使用assets/icons.js javascript 文件来生成这些图标。

使用您的开发人员工具查看源选项卡，以获取网页的所有使用文档。

assets/icons.js 文件：

var icons = ['js', 'json', 'css', 'sass', 'less', 'html', 'jpg', 'png', 'gif', 'bmp', 'svg', 'raw', 'rs', 'ts']

var container = document.querySelector('.icons')

function spawn() {
  var icon = icons[Math.floor(Math.random() * icons.length)]
  var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
  svg.style.left = 25 + Math.random() * 50 + '%'
  svg.setAttribute('class', 'icon')
  var use = document.createElementNS('http://www.w3.org/2000/svg', 'use')
  use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'assets/icons.svg#' + icon)
  svg.appendChild(use)
  container.appendChild(svg)

  setTimeout(function() {
    container.removeChild(svg)
  }, 3000)
}

setTimeout(function run() {
  spawn()
  setTimeout(run, 500 + Math.random() * 400)
}, 500 + Math.random() * 400)

spawn()

因此，如果您只想复制此示例，您将使用 w3.org 的示例来获取这些图标。

【讨论】：