【问题标题】:Animated page style change after swipe滑动后动画页面样式更改
【发布时间】:2021-03-29 21:37:31
【问题描述】:

我决定创建一个页面,在移动设备上滑动手指后,它的 css 样式会完全改变。

我设法实现了这一切。它的工作原理如下:

  1. 第一个样式在 main.css 文件中指定
  2. 为方便起见,每个后续的(有四个)都在其他文件中指定
  3. 我在 jQuery Mobile 库的帮助下检测到滑动
  4. 滑动后,主体的类会发生变化,因此您可以为每次更改指定单独的样式

一切正常,但我希望这些滑动具有动画效果。 我不知道该怎么做,因为它只是样式改变的一方面。

可以吗?以及如何?

Image of the intended effect

照片显示了我希望动画在其持续时间中途的样子。

提前感谢所有答案

【问题讨论】:

    标签: html jquery css animation jquery-mobile


    【解决方案1】:

    我假设您正在使用 jquery 的窗口滑动功能

    window.on("swipe", function() {}
    

    当您更改元素(或主体)的类时,您还可以在 css 中指定动画/过渡。例如,如果您要在此处更改此 div,您可以为要添加的新类指定动画或过渡-

    <div class = "classOne"></div>
    <style>
    .classTwo {
       transition: all 2s ease;
       background-color: blue;
      }
      </style>
    

    所以现在当您使用 jQuery 将 divs 类更改为 classTwo 时,将应用过渡或动画。

    【讨论】:

    • 我的意思是样式应该一个接一个地滑动。现在它们只移动页面元素。
    • 你可以在元素上使用动画延迟:)
    • 我的意思是让样式像这样移动:codepen.io/anna_blok/pen/eYYRbQY
    • 对不起,我没有答案。祝你好运
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多