小编Tec*_*nav的帖子

我将 Node.js WebApp 部署到 heroku 但收到此错误

2021-06-01T09:19:42.615419+00:00 heroku[web.1]: State changed from crashed to starting
2021-06-01T09:19:47.259832+00:00 heroku[web.1]: Starting process with command `node app.js`
2021-06-01T09:19:51.146182+00:00 app[web.1]: Server is running on port 3001.
2021-06-01T09:20:47.916699+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to 
bind to $PORT within 60 seconds of launch
2021-06-01T09:20:47.989032+00:00 heroku[web.1]: Stopping process with SIGKILL
2021-06-01T09:20:48.124402+00:00 heroku[web.1]: Process exited with status 137
2021-06-01T09:20:48.196055+00:00 heroku[web.1]: State changed from starting to crashed
2021-06-01T09:24:45.072782+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET 
path="/" host=positate.herokuapp.com request_id=7e9ec2b1-5685-4c3f-9c29-6c03268b7c82 …

我发现这段代码添加了在 div 中水平滚动的按钮，它是由 Vlad Danila 制作的，但问题是我无法为它的滚动设置动画。我尝试向容器添加过渡，但没有成功。

const buttonRight = document.getElementById('slideRight');
const buttonLeft = document.getElementById('slideLeft');

buttonRight.onclick = function() {
  document.getElementById('container').scrollLeft += 20;
};
buttonLeft.onclick = function() {
  document.getElementById('container').scrollLeft -= 20;
};

#container {
  width: 145px;
  height: 100px;
  border: 1px solid #ccc;
  overflow-x: scroll;
}

#content {
  width: 250px;
  background-color: #ccc;
}

<div id="container">
  <div id="content">Click the buttons to slide horizontally!</div>
</div>
<button id="slideLeft" type="button">Slide left</button>
<button id="slideRight" type="button">Slide right</button>

比较以下两个代码片段-

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  display: inline-block;
}

.box1 {
  margin: 100px;
  transform: skew(30deg);
}

<div class="box box1"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  display: inline-block;
}

.box2 {
  transform: matrix(1, 0, 30, 1, 0, 0);
}

<div class="box box2"></div>

在我使用的第一个代码片段和我使用transform: skew(30deg); 的第二个代码片段中， transform: matrix(1,0,30,1,0,0); 正如您在matrix()函数中看到的那样，我将所有参数保留为默认值，但skewX()我将其更改为30. skew(30deg)根据我的假设，这应该像工作一样。由于文档说matrix()采用如下参数：

matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() );

如果您运行上面的代码片段，那么您会发现不同的输出。为什么他们不一样？正如我的假设所说，它应该是相等的，因为我skewX(30deg)在这两种情况下都使用过。

该matrix()功能实际上是如何工作的？

矩阵函数中的scaleX(), …