Merge branch 'qq_50112998/unidocs-zh-qq_50112998-master-patch-21225' into docs/merge-docs

5a4c3419 · 辛宝Otto · c3ed84e1 · cb235cc7 · 5a4c3419
隐藏空白更改
内联并排

Showing with 162 addition and 163 deletion

docs/component/uniui/uni-transition.md docs/component/uniui/uni-transition.md +162 -163

未找到文件。
--- a/docs/component/uniui/uni-transition.md
+++ b/docs/component/uniui/uni-transition.md
-
 ::: tip 组件名：uni-transition
 > 代码块： `uTransition`

@@ -134,12 +133,12 @@ export default {
 	},
 	methods: {
 		run() {
-			// 同时右平移到 100px,旋转 360 读
+			// 同时右平移到 100px,旋转 360 度
 			this.$refs.ani.step({
 				translateX: '100px',
 				rotate: '360'
 			})
-			// 上面的动画执行完成后，等待200毫秒平移到 0px,旋转到 0 读
+			// 上面的动画执行完成后，等待200毫秒平移到 0px,旋转到 0 度
 			this.$refs.ani.step({
 				translateX: '0px',
 				rotate: '0'
@@ -394,173 +393,173 @@ this.$refs.ani.step({
 ::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/transition/transition
 > Template
 ``` html
-<template>
-	<view>
-		<uni-card is-full :is-shadow="false">
-			<text class="uni-h6">过渡动画，通常用于元素的过渡效果，例如淡隐淡出效果，遮罩层的效果、放大缩小的效果等</text>
-		</uni-card>
-		<uni-section title="示例" type="line">
-			<view class="example">
-				<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
-					:show="show"><text class="text">示例元素</text></uni-transition>
-			</view>
-		</uni-section>
-
-		<uni-section title="操作" subTitle="点击按钮 ,切换动画效果" type="line">
-			<view class="example-body">
-				<button class="transition-button" type="primary" @click="handle('fade')">淡隐淡出</button>
-				<button class="transition-button" type="primary" @click="handle(['fade', 'slide-top'])">由上至下</button>
-				<button class="transition-button" type="primary" @click="handle(['fade', 'slide-right'])">由右至左过</button>
-				<button class="transition-button" type="primary" @click="handle(['fade', 'zoom-in'])">由小到大过</button>
-				<button class="transition-button" type="primary" @click="custom">自定义动画</button>
-			</view>
-		</uni-section>
-
-	</view>
-</template>
+<template>
+	<view>
+		<uni-card is-full :is-shadow="false">
+			<text class="uni-h6">过渡动画，通常用于元素的过渡效果，例如淡隐淡出效果，遮罩层的效果、放大缩小的效果等</text>
+		</uni-card>
+		<uni-section title="示例" type="line">
+			<view class="example">
+				<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
+					:show="show"><text class="text">示例元素</text></uni-transition>
+			</view>
+		</uni-section>
+
+		<uni-section title="操作" subTitle="点击按钮 ,切换动画效果" type="line">
+			<view class="example-body">
+				<button class="transition-button" type="primary" @click="handle('fade')">淡隐淡出</button>
+				<button class="transition-button" type="primary" @click="handle(['fade', 'slide-top'])">由上至下</button>
+				<button class="transition-button" type="primary" @click="handle(['fade', 'slide-right'])">由右至左过</button>
+				<button class="transition-button" type="primary" @click="handle(['fade', 'zoom-in'])">由小到大过</button>
+				<button class="transition-button" type="primary" @click="custom">自定义动画</button>
+			</view>
+		</uni-section>
+
+	</view>
+</template>
 ```
 > Script
-```html
-<script>
-	export default {
-		components: {},
-		data() {
-			return {
-				show: true,
-				modeClass: 'fade',
-				styles: {}
-			}
-		},
-		onLoad() {
-			// #ifdef APP-NVUE
-			this.styles = {
-				justifyContent: 'center',
-				alignItems: 'center',
-				width: '100px',
-				height: '100px',
-				borderRadius: '5px',
-				textAlign: 'center',
-				backgroundColor: '#4cd964',
-				boxShadow: '0 0 5px 1px rgba(0,0,0,0.2)'
-			}
-			// #endif
-		},
-		methods: {
-			handle(type) {
-				this.show = !this.show
-				this.modeClass = type
-			},
-			custom() {
-				// TODO 下面修改宽高在百度下还有些问题待修复
-				// this.$refs.ani.step({
-				// 	width: '200px'
-				// })
-				// this.$refs.ani.step({
-				// 	height: '150px'
-				// },{
-				// 	delay:100,
-				// 	duration:200
-				// })
-				this.$refs.ani.step({
-					width: '100px',
-					height: '100px',
-					rotate: '180'
-				}, {
-					delay: 200,
-					duration: 300
-				})
-				this.$refs.ani.step({
-					width: '100px',
-					height: '100px',
-					rotate: '0'
-				}, {
-					transformOrigin: '50% 50%'
-				})
-
-				this.$refs.ani.step({
-					translateX: '-100px'
-				}, {
-					timingFunction: 'ease-in',
-					duration: 100
-				})
-
-				this.$refs.ani.step({
-					translateX: '100px'
-				}, {
-					timingFunction: 'ease',
-					duration: 300
-				})
-
-				this.$refs.ani.step({
-					translateX: '50px',
-					scale: 1.5
-				}, {
-					timingFunction: 'linear',
-					duration: 100
-				})
-				this.$refs.ani.step({
-					translateX: '0px',
-					scale: 1
-				}, {
-					timingFunction: 'linear',
-					duration: 150
-				})
-
-				this.$refs.ani.run()
-			}
-		}
-	}
-</script>
+```html
+<script>
+	export default {
+		components: {},
+		data() {
+			return {
+				show: true,
+				modeClass: 'fade',
+				styles: {}
+			}
+		},
+		onLoad() {
+			// #ifdef APP-NVUE
+			this.styles = {
+				justifyContent: 'center',
+				alignItems: 'center',
+				width: '100px',
+				height: '100px',
+				borderRadius: '5px',
+				textAlign: 'center',
+				backgroundColor: '#4cd964',
+				boxShadow: '0 0 5px 1px rgba(0,0,0,0.2)'
+			}
+			// #endif
+		},
+		methods: {
+			handle(type) {
+				this.show = !this.show
+				this.modeClass = type
+			},
+			custom() {
+				// TODO 下面修改宽高在百度下还有些问题待修复
+				// this.$refs.ani.step({
+				// 	width: '200px'
+				// })
+				// this.$refs.ani.step({
+				// 	height: '150px'
+				// },{
+				// 	delay:100,
+				// 	duration:200
+				// })
+				this.$refs.ani.step({
+					width: '100px',
+					height: '100px',
+					rotate: '180'
+				}, {
+					delay: 200,
+					duration: 300
+				})
+				this.$refs.ani.step({
+					width: '100px',
+					height: '100px',
+					rotate: '0'
+				}, {
+					transformOrigin: '50% 50%'
+				})
+
+				this.$refs.ani.step({
+					translateX: '-100px'
+				}, {
+					timingFunction: 'ease-in',
+					duration: 100
+				})
+
+				this.$refs.ani.step({
+					translateX: '100px'
+				}, {
+					timingFunction: 'ease',
+					duration: 300
+				})
+
+				this.$refs.ani.step({
+					translateX: '50px',
+					scale: 1.5
+				}, {
+					timingFunction: 'linear',
+					duration: 100
+				})
+				this.$refs.ani.step({
+					translateX: '0px',
+					scale: 1
+				}, {
+					timingFunction: 'linear',
+					duration: 150
+				})
+
+				this.$refs.ani.run()
+			}
+		}
+	}
+</script>

 ```
 > Style
-```html
-<style lang="scss">
-	.example {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		justify-content: center;
-		align-items: center;
-		height: 150px;
-		background-color: #fff;
-	}
-
-	.example-body {
-		padding: 10px 20px;
-		padding-bottom: 0px;
-	}
-
-	.transition-button {
-		/* #ifndef APP-NVUE */
-		width: 100%;
-		/* #endif */
-		flex: 1;
-		margin-bottom: 10px;
-	}
-
-	/* #ifndef APP-NVUE */
-	.example ::v-deep .transition {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		width: 100px;
-		height: 100px;
-		border-radius: 5px;
-		text-align: center;
-		background-color: #4cd964;
-		box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
-	}
-
-	/* #endif */
-
-	.text {
-		font-size: 14px;
-		color: #fff;
-	}
+```html
+<style lang="scss">
+	.example {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		align-items: center;
+		height: 150px;
+		background-color: #fff;
+	}
+
+	.example-body {
+		padding: 10px 20px;
+		padding-bottom: 0px;
+	}
+
+	.transition-button {
+		/* #ifndef APP-NVUE */
+		width: 100%;
+		/* #endif */
+		flex: 1;
+		margin-bottom: 10px;
+	}
+
+	/* #ifndef APP-NVUE */
+	.example ::v-deep .transition {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100px;
+		height: 100px;
+		border-radius: 5px;
+		text-align: center;
+		background-color: #4cd964;
+		box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
+	}
+
+	/* #endif */
+
+	.text {
+		font-size: 14px;
+		color: #fff;
+	}
 </style>

 ```
 :::

-[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/transition/transition)
\ No newline at end of file
+[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/transition/transition)