Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DMC_DevilMayCry
unidocs-zh
提交
5a4c3419
unidocs-zh
项目概览
DMC_DevilMayCry
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
5a4c3419
编写于
1月 06, 2024
作者:
辛宝Otto
🥊
浏览文件
操作
浏览文件
下载
差异文件
Merge branch 'qq_50112998/unidocs-zh-qq_50112998-master-patch-21225' into docs/merge-docs
上级
c3ed84e1
cb235cc7
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
162 addition
and
163 deletion
+162
-163
docs/component/uniui/uni-transition.md
docs/component/uniui/uni-transition.md
+162
-163
未找到文件。
docs/component/uniui/uni-transition.md
浏览文件 @
5a4c3419
::: 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
)
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录