草庐IT

jQuery Mobile 过渡

runoob 2023-04-07 原文

jQuery Mobile 过渡


jQuery Mobile 包含 CSS3 效果让您选择页面打开的方式。


jQuery Mobile 页面切换效果

jQuery Mobile 提供了各种页面切换到下一个页面的效果。

注意:为了实现页面切换效果,浏览器必须支持 CSS3 3D 切换:

12.0 10.0 16.0 4.0 15.0

表格中的数字为支持 3D 旋转的最小浏览器版本号。

页面过渡效果可被应用于任何使用 data-transition 属性的链接或表单:

页面切换效果可被应用于任何使用 data-transition 属性的链接或表单提交:

<a href="#anylink" data-transition="slide">切换到第二个页面</a>

下面的表格显示了通过使用 data-transition 属性后可用的页面切换:

过渡 描述 页面 对话框
fade 默认。淡入到下一页 尝试一下 尝试一下
flip 从后向前翻转到下一页 尝试一下 尝试一下
flow 抛出当前页,进入下一页 尝试一下 尝试一下
pop 像弹出窗口那样转到下一页。 尝试一下 尝试一下
slide 从右向左滑动到下一页。 尝试一下 尝试一下
slidefade 从右向左滑动并淡入到下一页。 尝试一下 尝试一下
slideup 从下到上滑动到下一页。 尝试一下 尝试一下
slidedown 从上到下滑动到下一页。 尝试一下 尝试一下
turn 转向下一页。 尝试一下 尝试一下
none 无过渡效果。 尝试一下 尝试一下

在 jQuery Mobile 的所有链接上,默认使用淡入淡出的效果(如果浏览器支持)。

提示:上面的所有效果支持后退行为。例如,如果您想要页面从左向右滑动,而不是从右向左滑动,请使用带有 "reverse" 值的 data-direction 属性。在后退按钮上这是默认的。

实例

<a href="#pagetwo" data-transition="slide" data-direction="reverse">切换</a>

尝试一下 »

有关jQuery Mobile 过渡的更多相关文章

  1. ruby-on-rails - AASM:来自任何州的过渡? - 2

    我正在使用AASM.是否可以从任何状态转换?例如:aasm_event:publishdotransitions:to=>:publish,:from=>ANY_STATEend我知道可以将状态数组传递给:from,但这不是我想要的。我试过完全省略:from,但没有用。 最佳答案 aasm现在支持不指定任何from的转换,这将允许从任何状态转换。aasm_event:publishdotransitionsto::publish#fromANYend(吹牛的权利:我添加此功能是因为我需要它)

  2. javascript - 如何通过pjax制作github风格的页面过渡 - 2

    有一次看到一篇文章说githubpagetransition是pjax做的,我查了一下jquery-pjax项目。我想我已经接近答案了,它一定是与事件pjax:start和pjax:end相关的东西,但我仍然无法让它工作,所以我尝试在这里获得一些帮助。$('a.pjax').pjax('#main');$('#main').bind('pjax:start',function(){$('#main').slideUp()}).bind('pjax:end'),function(){$('#main').slideDown()});但是没有效果 最佳答案

  3. javascript - IE < 9 CSS3 过渡效果秘籍? - 2

    有没有类似于IE7.js的“作弊”机制可用于不支持CSS3转换的浏览器,以便如果您将CSS3转换元素插入页面,它会将它们转换为javascript方法? 最佳答案 当然,有几个:http://louisremi.github.com/jquery.transition.js/test/index.htmlhttp://playground.benbarnett.net/jquery-animate-enhanced/ 关于javascript-IE https://stac

  4. javascript - 评论高亮css过渡效果 - 2

    我正在尝试实现当链接到另一个页面上的目标元素时,目标会突出显示然后淡化为默认页面颜色(即白色)的效果。我正在寻找的一个简单示例与在StackOverflow上查看链接评论时相同:CSS:highlightedtexteffect当您第一次查看评论时,它会以一种颜色突出显示,然后过渡为白色。我能够让它从白色变成另一种颜色,但似乎无法反过来,也找不到任何直接帮助的资源。要从白色变为红色,我有::target{border-radius:3px;background-color:red;transition:background-color1slinear;}html:将您带到目标的链接:A

  5. javascript - D3.js 文本输入(在 svg 内)过渡不透明度 0 到 1 不会以 1 结束 - 2

    我正在尝试使用以下代码让我的文本输入从0到1的选择过渡不透明度。如果没有过渡和不透明度设置,文本会按预期显示。但是使用这段代码,不透明度从0开始但永远不会变成1;并且没有添加文本值?[我的代码中的所有其他转换都按预期工作]。/***@paramtext*selectionwithdatatoaddtextfrom&truncateby,witha*delay.*/functionaddBubbleTextByData(text){text.style("opacity",0).transition().delay(1.1*transitionDelay).style("opacity"

  6. javascript - Angular 到 Aurelia 的过渡——一些基本问题 - 2

    我们正在考虑将Aurelia用于新应用。我来自Angular1背景(接触过Angular2)。Aurelia看起来相当不错,我真的很喜欢他们如何承担起维护开发人员工作流程的责任。但是我有一些问题似乎无法找到答案:1)有两种一般方法(据我所知)可以在页面中包含Web组件。这些是并编写自定义元素。我的问题是,Angular非常强调作用域(即DOM中特定点的作用域)。我想知道“范围”中有什么(即可用于绑定(bind)表达式)与组合和自定义元素。我的意思是,子模板中是否有父View模型?如果是这样,subview模型属性是否隐藏/隐藏父View模型属性?2)在Angular2中,有关于如何将数

  7. javascript - 如何使用 JQuery 添加淡入淡出或图像过渡效果? - 2

    我只有一个我页面上的元素。我更改了src每7秒检查一次此图像的属性。我每7秒看到一次新图像,但如果我可以在加载新图像时添加一些淡入淡出或过渡效果会更好。有一些简单的脚本吗?我不需要任何插件。只需要一些线索或几行示例即可。 最佳答案 尽管KaiQing提到过,您可以使用jQuery的回调功能在更改图像时淡入/淡出图像。这可以像这样完成:http://www.jsfiddle.net/bradchristie/HsKpq/1/$('img').fadeOut('slow',function(){$(this).attr('src','/

  8. javascript - 为什么在应用类时需要 setTimeout 才能让我的过渡生效? - 2

    我有一个应用了过渡的元素。我想通过向导致过渡运行的元素添加一个类来控制过渡。但是,如果我太快地应用类,过渡效果就不会发生。我假设这是因为.shown在与.foo被放置到DOM上时相同的事件循环中被放置到div上。这会诱使浏览器认为它是使用opacity:1创建的,因此不会进行任何转换。我想知道是否有一个优雅的解决方案,而不是将我的类包装在setTimeout中。这是一个片段:varfoo=$('',{'class':'foo'});foo.appendTo($('body'));setTimeout(function(){foo.addClass('shown');});.foo{op

  9. javascript - D3 过渡 : Fading in and out the colors within a gradient fill - 2

    在这个D3图中,圆圈填充了径向渐变,并且改变不透明度用于淡入和淡出:varwidth=400,height=400,padding=1.5,//separationbetweensame-colornodesclusterPadding=6,//separationbetweendifferent-colornodesmaxRadius=12;varn=200,//totalnumberofnodesm=10;//numberofdistinctclustersvarcolor=d3.scale.category10().domain(d3.range(m));//Thelargest

  10. javascript - 排毒,过渡中的按钮匹配了多个元素 - 2

    我正在使用detoxe2e为我的react-native应用程序创建测试用例。长话短说,我在组件的渲染函数中有一个按钮,该按钮从左向右过渡。我已经为该按钮提供了一个唯一的测试ID。在我的测试用例中,我希望该按钮使用其测试ID出现。但是当我运行“排毒测试”时,测试失败并且错误提示多个元素与该测试ID匹配。我的测试文件代码是:describe('Loginflow',()=>{//testcaseforwalletgenerationit('shouldgeneratenewwallet',async()=>{awaitexpect(element(by.id('WelcomeScreen

随机推荐