ant-design/a20293b3-async.2930038a.js

(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["a20293b3"],{a20293b3:function(e,a,t){"use strict";t.d(a,"__esModule",{value:!0}),t.d(a,"default",{enumerable:!0,get:function(){return h;}});var n=t("777fffbe"),s=t("f19d2b93"),i=n._(t("97c488ea")),l=n._(t("5e4632fa")),r=n._(t("c96b0d01")),o=t("5b220c3d"),d=t("9c86e52a"),c=t("bf99677a"),h=function(){return(0,s.jsx)(d.DumiPage,{children:(0,s.jsx)(o.Suspense,{fallback:(0,s.jsx)(r.default,{}),children:(0,s.jsx)(s.Fragment,{children:(0,s.jsxs)("div",{className:"markdown",children:[(0,s.jsx)("p",{children:c.texts[0].value}),(0,s.jsxs)("ul",{children:[(0,s.jsx)("li",{children:c.texts[1].value}),(0,s.jsx)("li",{children:c.texts[2].value}),(0,s.jsx)("li",{children:c.texts[3].value})]}),(0,s.jsx)("hr",{}),(0,s.jsxs)("h2",{id:"maintain-context-while-changing-views",children:[(0,s.jsx)(i.default,{"aria-hidden":"true",tabIndex:"-1",href:"#maintain-context-while-changing-views",sourceType:"a",children:(0,s.jsx)("span",{className:"icon icon-link"})}),"Maintain Context While Changing Views"]}),(0,s.jsx)("p",{children:(0,s.jsx)(l.default,{className:"transition-video-player",alt:"example of Slide In and Slide Out ",src:"https://os.alipayobjects.com/rmsportal/EejaUGsyExkXyXr.mp4"})}),(0,s.jsx)("p",{children:c.texts[4].value}),(0,s.jsx)("br",{}),(0,s.jsx)("p",{children:(0,s.jsx)(l.default,{className:"transition-video-player",alt:"example of Carousel",src:"https://os.alipayobjects.com/rmsportal/GIutPgZMTyfFfrH.mp4"})}),(0,s.jsx)("p",{children:c.texts[5].value}),(0,s.jsx)("br",{}),(0,s.jsx)("p",{children:(0,s.jsx)(l.default,{className:"transition-video-player",alt:"example of Accordion",src:"https://os.alipayobjects.com/rmsportal/ERKhqHlcHiCDSQu.mp4"})}),(0,s.jsx)("p",{children:c.texts[6].value}),(0,s.jsx)("br",{}),(0,s.jsx)("hr",{}),(0,s.jsxs)("h2",{id:"explain-what-just-happened",children:[(0,s.jsx)(i.default,{"aria-hidden":"true",tabIndex:"-1",href:"#explain-what-just-happened",sourceType:"a",children:(0,s.jsx)("span",{className:"icon icon-link"})}),"Explain What Just Happened"]}),(0,s.jsx)("p",{children:(0,s.jsx)(l.default,{className:"transition-video-player",alt:"example of Adding an Object",description:"When an object is added, the highlighted area shows it to the user. The highlight fades in several seconds in order not to interfere the user flow.",src:"https://os.alipayobjects.com/rmsportal/FqkQMyFqNqielOw.mp4"})}),(0,s.jsx)("p",{children:c.texts[7].value}),(0,s.jsx)("br",{}),(0,s.jsx)("p",{children:(0,s.jsx)(l.default,{className:"transition-video-player",alt:"example of Deleting Objects",src:"https://os.alipayobjects.com/rmsportal/pnNkNIMoowmGUQy.mp4"})}),(0,s.jsx)("p",{children:c.texts[8].value}),(0,s.jsx)("br",{}),(0,s.jsx)("p",{children:(0,s.jsx)(l.default,{className:"transition-video-player",alt:"example of Modifying an object",description:"Status No.1: The user modifies the value of Detail. <br>Status No.2: After the user click the save button, a yellow fill is displayed in the grid of Detail, which indicates the change of the object. <br>Status No.3: The fill fades in several seconds and returned to normal.",src:"https://os.alipayobjects.com/rmsportal/XrUIWmsmOlEnZGc.mp4"})}),(0,s.jsx)("p",{children:c.texts[9].value}),(0,s.jsx)("br",{}),(0,s.jsx)("p",{children:(0,s.jsx)(l.default,{className:"transition-video-player",alt:"example of Calling out an Object",src:"https://os.alipayobjects.com/rmsportal/gSNilqbiXOufDXF.mp4"})}),(0,s.jsx)("p",{children:c.texts[10].value}),(0,s.jsx)("hr",{}),(0,s.jsxs)("h2",{id:"improve-perceived-performance",children:[(0,s.jsx)(i.default,{"aria-hidden":"true",tabIndex:"-1",href:"#improve-perceived-performance",sourceType:"a",children:(0,s.jsx)("span",{className:"icon icon-link"})}),"Improve Perceived Performance"]}),(0,s.jsx)("p",{children:c.texts[11].value}),(0,s.jsx)("hr",{}),(0,s.jsxs)("h2",{id:"natural-motion",children:[(0,s.jsx)(i.default,{"aria-hidden":"true",tabIndex:"-1",href:"#natural-motion",sourceType:"a",children:(0,s.jsx)("span",{className:"icon icon-link"})}),"Natural Motion"]}),(0,s.jsxs)("p",{children:[c.texts[12].value,(0,s.jsx)(i.default,{href:"https://motion.ant.design/language/basic",sourceType:"a",children:c.texts[13].value}),c.texts[14].value]})]})})})});};},bf99677a:function(e,a,t){"use strict";t.d(a,"__esModule",{value:!0}),t.d(a,"texts",{enumerable:!0,get:function(){return n;}}),t("2fc2317f");let n=[{value:"Our Gray Matter are wired to react to dynamic things like movement, shape change and color change. Transitions smooth out the jarring world of the Web, making changes appear more natural. The main purpose for Transitions is to provide an engaging interface and reinforce communication.",paraId:0},{value:"Adding: The added elements should inform the users how to use, and the modified elements should be recognized.",paraId:1},{value:"Receding: The irrelevant page elements should be removed properly.",paraId:1},{value:"Normal: The elements without any change on the page can be safely ignored.",paraId:1},{value:"Slide In and Slide Out: Create an illusion of virtual space.",paraId:2,tocIndex:0},{value:"Carousel: Carousels are great for extending virtual space.",paraId:3,tocIndex:0},{value:"Accordion: Accordion helps maintain context while switching views.",paraId:4,tocIndex:0},{value:"Adding an Object: Add an object in the table or chart.",paraId:5,tocIndex:1},{value:"Deleting an Object: Delete an object in the table or chart.",paraId:6,tocIndex:1},{value:"Modifying an Object: Modify an object in the table or chart.",paraId:7,tocIndex:1},{value:"Calling out an Object: Click the page element and call out a new object.",paraId:8,tocIndex:1},{value:"If actual performance can hardly improved, there is a difference between actual performance and perceived performance. Diverting the user's attention is a good way to improve the perceived time an operation takes.",paraId:9,tocIndex:2},{value:"Please refer to ",paraId:10,tocIndex:3},{value:"Ant Motion, a motion language",paraId:10,tocIndex:3},{value:".",paraId:10,tocIndex:3}];}}]);