7

https://codepen.io/popmotion/pen/Kyewbv

由于某种原因，这不起作用。

https://popmotion.io/pure/如此处所述，它必须是

const slider = document.querySelector('.slider');
const sliderX = value(0, styler(slider).set('x'))

listen(slider, 'mousedown touchstart').start(() => {
  pointer({ x: sliderX.get() })
    .pipe(({ x }) => x, clampMovement)
    .start(sliderX);
});

listen(document, 'mouseup touchend').start(() => {
  decay({
    from: sliderX.get(),
    velocity: sliderX.getVelocity()
  }).pipe(clampMovement)
    .start(sliderX);
});

每当我使用它时，夹子运动都显示为未定义。实际上应该是什么？有什么可以让它工作的吗？

4

2 回答 2

3

如果您查看Decay 文档，您会看到：

注意：不推荐使用此动画以支持惯性。

惯性动画的文档：https ://popmotion.io/api/inertia/

一个codepen：https ://codepen.io/popmotion/pen/BMNvqj

这是一个活生生的例子：

const { styler, inertia, listen, pointer, value, calc } = window.popmotion;

const slider = document.querySelector('.carousel');

const divStyler = styler(slider);
const sliderX = value(0, v => divStyler.set('x', v));

listen(slider, 'mousedown touchstart').start(() => {

  pointer({ x: sliderX.get() })
    .pipe(({ x }) => x)
    .start(sliderX);
});

listen(document, 'mouseup touchend').start(() => {
  inertia({
    min: -slider.scrollWidth, //0,
    max: -0, //getBoundariesWidth(),
    from: sliderX.get(),
    velocity: sliderX.getVelocity(),
    power: 0.6,
    bounceStiffness: 400,
    bounceDamping: 20
  })
  .start(sliderX);
});
body {
  --pink: #ff1c68;
  --green: #14d790;
  --blue: #198fe3;
  --black: #21282d;
  --purple: #9b65de;
  color: #222;
  background: #49a9f8;
  font-family: 'PT Sans', sans-serif;
  height: 100vh;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  padding: 0 20px;
}
.pen {
  flex: 1 1 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  margin: 0 auto;
  width: 100%;
  max-width: 600px;
}
.created-by {
  flex: 0 0 50px;
  background: #fff;
  color: #222;
  text-decoration: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 30px;
  margin: 0 -20px;
}
.logo {
  margin-left: 10px;
}
h1 {
  font-size: 32px;
  line-height: 28px;
  margin-bottom: 10px;
  color: white;
}
.pen a {
  color: white;
  margin-bottom: 70px;
}
.carousel {
  display: flex;
  align-items: stretch;
  height: 100px;
  position: relative;
  background: #6dc1f9;
  width: 100%;
  border-radius: 5px;
}
.carousel .item {
  background: white;
  border-radius: 5px;
  margin-right: 15px;
  flex: 0 0 100px;
}
.carousel .item:nth-child(4n + 2) {
  background: var(--green);
}
.carousel .item:nth-child(4n + 3) {
  background: var(--pink);
}
.carousel .item:nth-child(4n + 4) {
  background: var(--blue);
}
<script src="https://unpkg.com/popmotion/dist/popmotion.global.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<div class="pen">
  <h1>Inertia playground</h1>
  <a href="https://popmotion.io/api/inertia" target="blank">View docs</a>
  <div class="carousel">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

如果要使用衰减动画：

const { styler, decay, listen, pointer, value, transform } = window.popmotion;

const { clamp } = transform;

const slider = document.querySelector('.carousel');
const divStyler = styler(slider);
// const sliderX = value(0, divStyler.set('x'));
const sliderX = value(0, v => divStyler.set('x', v));


listen(slider, 'mousedown touchstart').start(() => {
 
  
  pointer({ x: sliderX.get() })
    .pipe(({ x }) => x)
    .start(sliderX);
});
  
listen(document, 'mouseup touchend').start(() => {
  
  decay({
    from: sliderX.get(),
    velocity: sliderX.getVelocity()
  }).pipe(clamp(-slider.scrollWidth, 0))
    .start(sliderX);
});
body {
  --pink: #ff1c68;
  --green: #14d790;
  --blue: #198fe3;
  --black: #21282d;
  --purple: #9b65de;
  color: #222;
  font-family: 'PT Sans', sans-serif;
  height: 100vh;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
}
.pen {
  flex: 1 1 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  margin: 0 auto;
  flex: 1 1 100%;
  width: 100%;
  max-width: 600px;
  padding: 0 20px;
}
.created-by {
  flex: 0 0 50px;
  background: #fff;
  color: #222;
  text-decoration: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 30px;
}
.logo {
  margin-left: 10px;
}
h1 {
  font-size: 32px;
  line-height: 28px;
  margin-bottom: 10px;
}
.pen a {
  color: var(--blue);
  text-decoration: none;
  margin-bottom: 70px;
}
.carousel {
  display: flex;
  align-items: stretch;
  height: 150px;
  position: relative;
}
.carousel .item {
  background: var(--purple);
  border-radius: 5px;
  margin-right: 15px;
  flex: 0 0 110px;
}
.carousel .item:nth-child(4n + 2) {
  background: var(--green);
}
.carousel .item:nth-child(4n + 3) {
  background: var(--pink);
}
.carousel .item:nth-child(4n + 4) {
  background: var(--blue);
}
<script src="https://unpkg.com/popmotion/dist/popmotion.global.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<div class="pen">
  <h1>Decay playground</h1>
  <a href="https://popmotion.io/api/decay" target="blank">View docs</a>
  <div class="carousel">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

Codepen 衰减演示：https ://codepen.io/anon/pen/GaLpwR

于 2019-06-04T15:22:14.380 回答
0

该库不起作用，如果您需要快速解决方案，您可以切换到另一个库。例如swiper它有许多示例和选项。

易于设置，可在许多浏览器中使用。

在 github https://github.com/nolimits4web/swiper上有很好的评价

于 2019-06-04T13:49:19.630 回答