将滑动动画添加到网站的移动端答案

【问题标题】：Adding swipe animations to mobile end of website将滑动动画添加到网站的移动端
【发布时间】：2017-05-17 01:39:57
【问题描述】：

我有一个网页上有一个图片库的网站。单击图像时，带有后退和前进按钮的模态弹出窗口会覆盖在屏幕上，并且可以正常工作。

但是，在移动设备上，我希望扩展此模式窗口，以便图像占据屏幕 100% 的宽度。我希望箭头消失，而用户应该能够通过滑动左右移动。理想情况下，会有一个滑动动画。

您如何建议实施这样的事情？是否有任何内置的 CSS、jQuery 或 Angular 命令？我想避免添加整个库或插件，但如果有什么东西很好用，那是什么？

【问题讨论】：

您的应用程序是用 Angular 编写的吗？因为这真的不是一个角度问题......
是的，它使用 Angular - 我对 Angular 不太熟悉，所以如果 Angular 中有什么东西可以帮助解决这个问题，我不知道。
javascript/jquery 会这样做。由于您不熟悉 Angular，您可能需要学习如何将此类组件包装在 Angular 中，但您可能很幸运能找到可以做到这一点的 Angular 包。
我看到了这个 jQuery swipe Event w3schools.com/jquerymobile/event_swipe.asp ，但我不认为它真的提供了滑动动画。或者至少给出的例子没有。
您可以使用 css 隐藏箭头按钮。并使用 ngTouch 的滑动事件，例如 ng-swipe-left 和 ng-swipe-right 来进行手势。滑动动画必须在您身边完成。

标签： jquery css angularjs swipe swipe-gesture

【解决方案1】：

我想问题是，你想要怎样的动画？使用 jquery swipe 事件（以及 swipeleft 和 swiperight）添加 css 以转换您想要包含多个内容的元素。还有可以绑定到滑动事件的 jquery 动画效果。如果你想保持简单，你可以坚持使用 CSS（并且有可能在旧版 IE 中被破坏）。在您的移动设备中查看此页面上的显示标签：https://tympanus.net/Development/DragDropInteractions/reveal.html 注意：你可以在这个链接上使用纯 CSS 做一些令人惊奇的事情

【讨论】：

哇！该页面上有一些不错的东西。谢谢！