网站移动端添加滑动动画
Adding swipe animations to mobile end of website
我有一个网页上有图片库的网站。单击图像时,带有向后和向前按钮的模态弹出窗口 window 会覆盖在屏幕上,效果很好。
但是,在移动设备上,我希望扩展此模式 window 以便图像占据屏幕的 100% 宽度。我希望箭头消失,相反,用户应该能够通过滑动左右移动。理想情况下,会有滑动动画。
你会如何建议实施这样的事情?是否有任何内置的 CSS、jQuery 或 Angular 命令?我想避免添加整个库或插件,但如果有什么东西很好用,那是什么?
我想问题是,你想要怎样的动画?使用 jquery 滑动事件(以及 swipeleft 和 swiperight)添加 css 来转换您想要包含多个内容的元素。还有 jquery 动画效果,您可以将其绑定到滑动事件。
如果你想保持简单,你可以坚持使用 CSS(并冒着破坏旧版 IE 的风险)。在您的移动设备上查看此页面上的显示选项卡:https://tympanus.net/Development/DragDropInteractions/reveal.html
注意:您可以在 link 上使用纯 CSS
做一些令人惊奇的事情
我有一个网页上有图片库的网站。单击图像时,带有向后和向前按钮的模态弹出窗口 window 会覆盖在屏幕上,效果很好。
但是,在移动设备上,我希望扩展此模式 window 以便图像占据屏幕的 100% 宽度。我希望箭头消失,相反,用户应该能够通过滑动左右移动。理想情况下,会有滑动动画。
你会如何建议实施这样的事情?是否有任何内置的 CSS、jQuery 或 Angular 命令?我想避免添加整个库或插件,但如果有什么东西很好用,那是什么?
我想问题是,你想要怎样的动画?使用 jquery 滑动事件(以及 swipeleft 和 swiperight)添加 css 来转换您想要包含多个内容的元素。还有 jquery 动画效果,您可以将其绑定到滑动事件。 如果你想保持简单,你可以坚持使用 CSS(并冒着破坏旧版 IE 的风险)。在您的移动设备上查看此页面上的显示选项卡:https://tympanus.net/Development/DragDropInteractions/reveal.html 注意:您可以在 link 上使用纯 CSS
做一些令人惊奇的事情