好看的页面切换动画(适用pc端和移动端)

原创 xudao 随笔 css3 746阅读 2018-06-21 14:29:22 举报

库地址

https://github.com/Chaunjie/page-transitions(喜欢的可以贡献下star

网站

https://chaunjie.github.io/page-transitions/

介绍

页面切换动画集合插件

如何使用这个插件.

依赖下面的这些资源库.

  • Css 库:
  • Javascript 库:
  • Html:

选项:

NameTypeDescriptionNeed
$mainObjectThe container of transition pagestrue
loopBoolWhether the list list of transition pages can be recycledthefalse
callbackFunctionCallback for page changedfalse

方法:

NameDescriptionArgs
nextPage(x)Do transition pages methodtransition type(int)
prevPage(x)Do transition pages methodtransition type(int)
appendPage(html)Append pages to main containerappend content(string)

调用:

例子:

动画类型:

TypeOutClassInClass
01pt-page-moveToLeftpt-page-moveFromRight
02pt-page-moveToRightpt-page-moveFromLeft
03pt-page-moveToToppt-page-moveFromBottom
04pt-page-moveToBottompt-page-moveFromTop
05pt-page-fadept-page-moveFromRight pt-page-ontop
06pt-page-fadept-page-moveFromLeft pt-page-ontop
07pt-page-fadept-page-moveFromBottom pt-page-ontop
08pt-page-fadept-page-moveFromTop pt-page-ontop
09pt-page-moveToLeftFadept-page-moveFromRightFade
10pt-page-moveToRightFadept-page-moveFromLeftFade
11pt-page-moveToTopFadept-page-moveFromBottomFade
12pt-page-moveToBottomFadept-page-moveFromTopFade
13pt-page-moveToLeftEasing pt-page-ontoppt-page-moveFromRight
14pt-page-moveToRightEasing pt-page-ontoppt-page-moveFromLeft
15pt-page-moveToTopEasing pt-page-ontoppt-page-moveFromBottom
16pt-page-moveToBottomEasing pt-page-ontoppt-page-moveFromTop
17pt-page-scaleDownpt-page-moveFromRight pt-page-ontop
18pt-page-scaleDownpt-page-moveFromLeft pt-page-ontop
19pt-page-scaleDownpt-page-moveFromBottom pt-page-ontop
20pt-page-scaleDownpt-page-moveFromTop pt-page-ontop
21pt-page-scaleDownpt-page-moveFromTop pt-page-ontop
22pt-page-scaleDownUppt-page-scaleUp pt-page-delay300
23pt-page-moveToLeft pt-page-ontoppt-page-scaleUp
24pt-page-moveToRight pt-page-ontoppt-page-scaleUp
25pt-page-moveToTop pt-page-ontoppt-page-scaleUp
26pt-page-moveToBottom pt-page-ontoppt-page-scaleUp
27pt-page-scaleDownCenterpt-page-scaleUpCenter pt-page-delay400
28pt-page-rotateRightSideFirstpt-page-moveFromRight pt-page-delay200 pt-page-ontop
29pt-page-rotateLeftSideFirstpt-page-moveFromLeft pt-page-delay200 pt-page-ontop
30pt-page-rotateTopSideFirstpt-page-moveFromTop pt-page-delay200 pt-page-ontop
31pt-page-rotateBottomSideFirstpt-page-moveFromBottom pt-page-delay200 pt-page-ontop
32pt-page-flipOutRightpt-page-flipInLeft pt-page-delay500
33pt-page-flipOutLeftpt-page-flipInRight pt-page-delay500
34pt-page-flipOutToppt-page-flipInBottom pt-page-delay500
35pt-page-flipOutBottompt-page-flipInTop pt-page-delay500
36pt-page-rotateFall pt-page-ontoppt-page-scaleUp
37pt-page-rotateOutNewspaperpt-page-rotateInNewspaper pt-page-delay500
38pt-page-rotatePushLeftpt-page-moveFromRight
39pt-page-rotatePushRightpt-page-moveFromLeft
40pt-page-rotatePushToppt-page-moveFromBottom
41pt-page-rotatePushBottompt-page-moveFromTop
42pt-page-rotatePushLeftpt-page-rotatePullRight pt-page-delay180
43pt-page-rotatePushRightpt-page-rotatePullLeft pt-page-delay180
44pt-page-rotatePushToppt-page-rotatePullBottom pt-page-delay180
45pt-page-rotatePushBottompt-page-rotatePullTop pt-page-delay180
46pt-page-rotateFoldLeftpt-page-moveFromRightFade
47pt-page-rotateFoldRightpt-page-moveFromLeftFade
48pt-page-rotateFoldToppt-page-moveFromBottomFade
49pt-page-rotateFoldBottompt-page-moveFromTopFade
50pt-page-moveToRightFadept-page-rotateUnfoldLeft
51pt-page-moveToLeftFadept-page-rotateUnfoldRight
52pt-page-moveToBottomFadept-page-rotateUnfoldTop
53pt-page-moveToTopFadept-page-rotateUnfoldBottom
54pt-page-rotateRoomLeftOut pt-page-ontoppt-page-rotateRoomLeftIn
55pt-page-rotateRoomRightOut pt-page-ontoppt-page-rotateRoomRightIn
56pt-page-rotateRoomTopOut pt-page-ontoppt-page-rotateRoomTopIn
57pt-page-rotateRoomBottomOut pt-page-ontoppt-page-rotateRoomBottomIn
58pt-page-rotateCubeLeftOut pt-page-ontoppt-page-rotateCubeLeftIn
59pt-page-rotateCubeRightOut pt-page-ontoppt-page-rotateCubeRightIn
60pt-page-rotateCubeTopOut pt-page-ontoppt-page-rotateCubeTopIn
61pt-page-rotateCubeBottomOut pt-page-ontoppt-page-rotateCubeBottomIn
62pt-page-rotateCarouselLeftOut pt-page-ontoppt-page-rotateCarouselLeftIn
63pt-page-rotateCarouselRightOut pt-page-ontoppt-page-rotateCarouselRightIn
64pt-page-rotateCarouselTopOut pt-page-ontoppt-page-rotateCarouselTopIn
65pt-page-rotateCarouselBottomOut pt-page-ontoppt-page-rotateCarouselBottomIn
66pt-page-rotateSidesOutpt-page-rotateSidesIn pt-page-delay200
67pt-page-rotateSlideOutpt-page-rotateSlideIn
评论 ( 2 )
最新评论
1325009640 14 天前 2F

这个插件叫啥名字啊

xudao 2018-06-21 14:31:05 1F

同时适用pc端和移动端