jjzjj

javascript - 新版本的 Popmotion 轮播修复

coder 2024-07-25 原文

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);
});

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

最佳答案

如果您查看 Decay documentation你会看到:

Note: This animation is deprecated in favour of inertia.

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

代码笔: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 Decay 演示:https://codepen.io/anon/pen/GaLpwR

关于javascript - 新版本的 Popmotion 轮播修复，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56414809/

javascriptPopmotiondivclassgtanimationslider

有关javascript - 新版本的 Popmotion 轮播修复的更多相关文章

  1. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  2. ruby-on-rails - 在 ruby​​ .gemspec 文件中，如何指定依赖项的多个版本？ - 2

    我正在尝试修改当前依赖于定义为activeresource的gem:s.add_dependency"activeresource","~>3.0"为了让gem与Rails4一起工作，我需要扩展依赖关系以与activeresource的版本3或4一起工作。我不想简单地添加以下内容，因为它可能会在以后引起问题:s.add_dependency"activeresource",">=3.0"有没有办法指定可接受版本的列表？~>3.0还是~>4.0？ 最佳答案 根据thedocumentation,如果你想要3到4之间的所有版本，你可以这

  3. ruby-on-rails - 如果我将 ruby​​ 版本 2.5.1 与 rails 版本 2.3.18 一起使用会怎样？ - 2

    如果我使用ruby​​版本2.5.1和Rails版本2.3.18会怎样？我有基于rails2.3.18和ruby​​1.9.2p320构建的rails应用程序，我只想升级ruby的版本，而不是rails，这可能吗？我必须面对哪些挑战？ 最佳答案 GitHub维护apublicfork它有针对旧Rails版本的分支，有各种变化，它们一直在运行。有一段时间，他们在较新的Ruby版本上运行较旧的Rails版本，而不是最初支持的版本，因此您可能会发现一些关于需要向后移植的有用提示。不过，他们现在已经有几年没有使用2.3了，所以充其量只能让更

  4. ruby-on-rails - 获取 inf-ruby 以使用 ruby​​ 版本管理器 (rvm) - 2

    我安装了ruby​​版本管理器，并将RVM安装的ruby​​实现设置为默认值，这样'哪个ruby'显示'~/.rvm/ruby-1.8.6-p383/bin/ruby'但是当我在emacs中打开inf-ruby缓冲区时，它使用安装在/usr/bin中的ruby​​。有没有办法让emacs像shell一样尊重ruby​​的路径？谢谢! 最佳答案 我创建了一个emacs扩展来将rvm集成到emacs中。如果您有兴趣，可以在这里获取:http://github.com/senny/rvm.el

  5. ruby-on-rails - 如何在发布新的 Ruby 或 Rails 版本时收到通知？ - 2

    有人知道在发布新版本的Ruby和Rails时收到电子邮件的方法吗？他们有邮件列表，RubyonRails有一个推特，但我不想听到那些随之而来的喧嚣，我只想知道什么时候发布新版本，尤其是那些有安全修复的版本。 最佳答案 从therailsblog获取提要.http://weblog.rubyonrails.org/feed/atom.xml 关于ruby-on-rails-如何在发布新的Ruby或Rails版本时收到通知？，我们在StackOverflow上找到一个类似的问题：

  6. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  7. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  8. ruby-on-rails - 安装多个版本的 Rails 会覆盖以前的安装吗？ - 2

    如果我一直输入geminstallrails使用不同版本的Rails会怎样？例如，我可以输入:geminstallrails--verson3.2.10或geminstallrails这给了我版本3.2.12。问题每次安装都会覆盖之前的吗？它会删除所有旧文件并添加我正在安装的新版本吗？或者如果我运行它两次，它会保留一些文件吗？我正在使用Ubuntu。 最佳答案 它将安装两个独立的gem。实际的可执行文件rails将调用最新版本。你可以覆盖它__例如，rails_3.2.10_将执行Rails3.2.10。bundler顺便说一下，如

  9. ruby - 在 Rails 项目中测试本地版本的 gem - 2

    我的Rails站点使用了一个确实不是很好的gem。每次我需要做一些新的事情时，我最终不得不花费与向实际Rails项目添加代码一样多的时间来为gem添加功能。但我不介意，我将我的Gemfile设置为指向我的gem的GitHub分支(我尝试提交PR，但维护者似乎已经下台)。问题是我真的没有找到一种合理的方法来测试我添加到gem的新东西。在railsc中测试它会特别好，但我能想到的唯一方法是a)更改~/.rvm/gems/.../foo。rb，这看起来不对或者b)升级版本，推送到Github，然后运行​​bundleup，这除了耗时之外显然是一场灾难，因为我不确定我所做的promise是否正

  10. ruby-on-rails - 不兼容的库版本 : nokogiri. bundle 需要 8.0.0 或更高版本，但 libiconv.2.dylib 提供 7.0.0 版本 - 2

    为了在我的mac上为一个rails项目安装mysql，我遵循了安装Homebrew软件和删除mac端口的在线建议。这是问题开始的地方。rails项目不会构建，我得到这个:[rake--prereqs]rakeaborted!dlopen(/Users/Parker/.rvm/gems/ruby-1.9.3-p448/gems/nokogiri-1.6.0/lib/nokogiri/nokogiri.bundle,9):Librarynotloaded:/opt/local/lib/libiconv.2.dylibReferencedfrom:/Users/Parker/.rvm/gem

随机推荐