简体中文
简体中文
# transition
transition CSS 属性是 transition-property、transition-duration、transition-timing-function 和 transition-delay 的一个简写属性 (en-US)。
# uni-app x 兼容性
| Web | Android | iOS |
|---|---|---|
| 4.0 | 3.9 | 4.11 |
# 语法
transition: <single-transition>#;
# transition 的属性值
| 名称 | 兼容性 | 描述 |
|---|---|---|
| all | 每一个能够进行过渡动画的属性都会进行过渡动画。 | |
| none | 没有属性会进行过渡动画。 |
# App平台
从 HBuilderX4.11 版起，默认值调整为all。HBuilderX4.11 以下版本，默认值为none。
transition暂不支持结束属性值为百分比。
# 示例
该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view class="container">
<text class="text">点击修改宽度</text>
<view class="base-style transition-width" id="widthOrHeight" @click="changeWidthOrHeight"></view>
</view>
<view class="container">
<text class="text">点击修改宽度(递增)</text>
<view class="width-progress transition-width" id="widthProgress" @click="changeWidthProgress"></view>
</view>
<view class="container">
<text class="text">点击修改宽度(通过style设置transition)</text>
<view class="base-style" style="transition-property: width; transition-duration: 1s;" id="widthOrHeightStyle" @click="changeWidthOrHeightStyle"></view>
</view>
<view class="container">
<text class="text">点击修改Margin</text>
<view class="base-style transition-margin" id="styleMargin" @click="changeMargin"></view>
</view>
<view class="container">
<text class="text">点击修改Padding</text>
<view class="base-style transition-padding" id="stylePadding" @click="changePadding">
<view style="background-color: black; height: 50px; width: 50px"></view>
</view>
</view>
<view class="container">
<text class="text">点击修改background-color和opacity</text>
<view class="base-style transition-background" id="styleBackground" @click="changeBackground"></view>
</view>
<view class="container">
<text class="text">点击修改background-color（rgba）</text>
<view style="flex: 1;">
<view class="base-style transition-background" id="styleBackground2" @click="changeBackground2"></view>
</view>
</view>
<view class="container">
<text class="text">点击修改opacity渐隐渐现</text>
<view class="base-style transition-opacity" id="styleOpacity" @click="changeStyleOpacity"></view>
</view>
<view class="container">
<text class="text">动态修改background-color和duration</text>
<view class="base-style" id="propertyStyleBackground" @click="propertyChangeBackground"></view>
</view>
<view class="container">
<text class="text">点击修改Transform</text>
<view class="base-style transition-transform" id="styleTransform" @click="changeTransform"></view>
</view>
<view class="container">
<text class="text">点击修改TransformTranslate</text>
<view class="base-style transition-transform" id="transformTranslate" @click="changeTransformTranslate"></view>
</view>
<view class="container">
<text class="text">点击修改Transform和宽</text>
<view class="base-style transition-transform-width" id="styleTransformWithWidth"
@click="changeTransformWithWidth"></view>
</view>
<view class="container" @click="changeTransformWithOrigin">
<text class="text">点击修改Transform（含transform-origin）</text>
<view class="base-style transition-transform" style="transform-origin: 0 0;" id="styleTransformWithOrigin"></view>
</view>
<view class="container">
<text class="text">点击修改Border</text>
<view class="base-style transition-border" id="styleBorder" @click="changeBorder"></view>
</view>
<view class="container">
<text class="text">点击修改Position</text>
<view class="base-style transition-position" id="stylePosition" @click="changestylePosition"></view>
</view>
<view class="container">
<text class="text">点击修改Scale
</text>
<view class="base-style transition-transform" id="styleChangScale" @click="changestyleScale"></view>
</view>
<view class="container" @touchmove="handleTouchMove" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
<text class="text">在组件内滑动测试是否闪动</text>
<view class="base-style transition-transform" id="styleTransformTranslateScale"></view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
export default {
data() {
return {
isTranstionWidthOrHeight: false,
widthOrHeight: null as UniElement | null,
widthProgress: null as UniElement | null,
isTranstionWidthOrHeightStyle: false,
widthOrHeightStyle: null as UniElement | null,
progressWidth: 200,
isTranstionChangeMargin: false,
styleMargin: null as UniElement | null,
isTransitionStylePadding: false,
stylePadding: null as UniElement | null,
isTransitionstyleBackground: false,
isTransitionstyleBackground2: false,
isTransitionstyleOpacity: false,
styleBackground: null as UniElement | null,
styleBackground2: null as UniElement | null,
styleOpacity: null as UniElement | null,
isTransitionStyleTransform: false,
styleTransform: null as UniElement | null,
isTransitionStyleTransformWithWidth: false,
styleTransformWithWidth: null as UniElement | null,
isTransitionstyleBorder: false,
styleBorder: null as UniElement | null,
isTransitionstylePosition: false,
stylePosition: null as UniElement | null,
isSetTransition: false,
isTransitionpropertystyleBackground: false,
propertyStyleBackground: null as UniElement | null,
isTransitionStyleTransformWithOrigin: false,
styleTransformWithOrigin: null as UniElement | null,
styleTransformTranslate: null as UniElement | null,
isTransformTranslate: false,
styleTransformTranslateScale: null as UniElement | null,
startX: 0,
moveX: 0,
oldX: 0,
}
},
onReady() {
this.widthOrHeight = uni.getElementById("widthOrHeight")
this.widthProgress = uni.getElementById("widthProgress")
this.widthOrHeightStyle = uni.getElementById("widthOrHeightStyle")
this.styleMargin = uni.getElementById("styleMargin")
this.stylePadding = uni.getElementById("stylePadding")
this.styleBackground = uni.getElementById("styleBackground")
this.styleBackground2 = uni.getElementById("styleBackground2")
this.styleOpacity = uni.getElementById("styleOpacity")
this.styleTransform = uni.getElementById("styleTransform")
this.styleBorder = uni.getElementById("styleBorder")
this.stylePosition = uni.getElementById("stylePosition")
this.propertyStyleBackground = uni.getElementById("propertyStyleBackground")
this.styleTransformWithOrigin = uni.getElementById("styleTransformWithOrigin")
this.styleTransformWithWidth = uni.getElementById("styleTransformWithWidth")
this.styleTransformTranslate = uni.getElementById("transformTranslate")
this.styleTransformTranslateScale = uni.getElementById("styleTransformTranslateScale")
},
methods: {
changeWidthOrHeight() {
this.widthOrHeight?.style?.setProperty("width", this.isTranstionWidthOrHeight
? '200px'
: '300px')
this.isTranstionWidthOrHeight = !this.isTranstionWidthOrHeight
},
changeWidthProgress() {
this.progressWidth += 20
this.widthProgress?.style?.setProperty("width", this.progressWidth + 'px')
},
changeWidthOrHeightStyle() {
this.widthOrHeightStyle?.style?.setProperty("width", this.isTranstionWidthOrHeightStyle
? '200px'
: '300px')
this.isTranstionWidthOrHeightStyle = !this.isTranstionWidthOrHeightStyle
},
changeMargin() {
this.styleMargin?.style?.setProperty("margin-top", this.isTranstionChangeMargin
? '0px'
: '50px'
)
this.styleMargin?.style?.setProperty("margin-left", this.isTranstionChangeMargin
? '0px'
: '50px'
)
this.isTranstionChangeMargin = !this.isTranstionChangeMargin
},
changePadding() {
this.stylePadding?.style?.setProperty("padding-top", this.isTransitionStylePadding
? '0px'
: '50px')
this.stylePadding?.style?.setProperty("padding-left", this.isTransitionStylePadding
? '0px'
: '50px')
this.isTransitionStylePadding = !this.isTransitionStylePadding
},
changeBackground() {
this.styleBackground?.style?.setProperty("background-color", this.isTransitionstyleBackground
? 'brown'
: 'black'
)
this.styleBackground?.style?.setProperty("opacity", this.isTransitionstyleBackground
? '1'
: '0.5'
)
this.isTransitionstyleBackground = !this.isTransitionstyleBackground
},
changeBackground2() {
this.styleBackground2?.style?.setProperty("background-color", this.isTransitionstyleBackground2
? 'brown'
: 'rgba(0, 0, 0, 0.5)'
)
this.isTransitionstyleBackground2 = !this.isTransitionstyleBackground2
},
changeStyleOpacity() {
this.styleOpacity?.style?.setProperty("opacity", this.isTransitionstyleOpacity
? '1'
: '0'
)
this.styleOpacity?.style?.setProperty("transition-duration", "1000ms")
this.isTransitionstyleOpacity = !this.isTransitionstyleOpacity
},
propertyChangeBackground() {
if (!this.isSetTransition) {
this.propertyStyleBackground?.style?.setProperty("transition-property", "background-color")
this.propertyStyleBackground?.style?.setProperty("transition-duration", "1000ms")
this.isSetTransition = true
}
this.propertyStyleBackground?.style?.setProperty("background-color", this.isTransitionpropertystyleBackground
? 'brown'
: 'black'
)
this.isTransitionpropertystyleBackground = !this.isTransitionpropertystyleBackground
},
changeTransform() {
this.styleTransform?.style?.setProperty("transform", this.isTransitionStyleTransform
? 'rotate(0deg)'
: 'rotate(135deg)'
)
this.isTransitionStyleTransform = !this.isTransitionStyleTransform
},
changeTransformTranslate() {
const translate = this.isTransformTranslate ? `translate(0%,0%)` : `translate(100%,0%)`
this.styleTransformTranslate?.style?.setProperty('transform', translate)
this.isTransformTranslate = !this.isTransformTranslate
},
changeTransformWithWidth() {
this.styleTransformWithWidth?.style?.setProperty("transform", this.isTransitionStyleTransformWithWidth
? 'rotate(0deg)'
: 'rotate(135deg)'
)
this.styleTransformWithWidth?.style?.setProperty("width", this.isTransitionStyleTransformWithWidth
? '200px'
: '100px'
)
this.isTransitionStyleTransformWithWidth = !this.isTransitionStyleTransformWithWidth
},
changeTransformWithOrigin() {
this.styleTransformWithOrigin?.style?.setProperty("transform", this.isTransitionStyleTransformWithOrigin
? 'scaleX(1)'
: 'scaleX(0)'
)
this.isTransitionStyleTransformWithOrigin = !this.isTransitionStyleTransformWithOrigin
},
changeBorder() {
this.styleBorder?.style?.setProperty("border-color", this.isTransitionstyleBorder
? 'brown'
: 'yellow'
)
this.isTransitionstyleBorder = !this.isTransitionstyleBorder
},
changestylePosition() {
this.stylePosition?.style?.setProperty("left", this.isTransitionstylePosition
? '0px'
: '100px'
)
this.isTransitionstylePosition = !this.isTransitionstylePosition
},
changestyleScale() {
let el = uni.getElementById("styleChangScale")
el?.style.setProperty("transition-duration", "0ms")
el?.style.setProperty("transform", "translate(10px,10px) scale(1)")
setTimeout(()=>{
el?.style.setProperty("transition-duration", "200ms")
el?.style.setProperty("transform", "translate(10px,10px) scale(0.5)")
}, 200)
},
handleTouchStart(e : UniTouchEvent) {
this.startX = e.changedTouches[0].clientX
},
handleTouchMove(e : UniTouchEvent) {
console.log("touchmove:" + e.touches[0].clientX + "," + e.touches[0].clientY);
e.preventDefault()
e.stopPropagation()
const difX = e.changedTouches[0].clientX
this.moveX = difX - this.startX + this.oldX
this.styleTransformTranslateScale?.style?.setProperty('transition-duration', '0ms')
this.styleTransformTranslateScale?.style?.setProperty('transform', `translate(${this.moveX}px,0px) scale(0.5)`)
},
handleTouchEnd(_ : UniTouchEvent) {
this.oldX = this.moveX
},
},
}
</script>
<style>
.container {
margin: 7px;
background-color: white;
}
.text {
margin-top: 10px;
margin-bottom: 16px;
}
.base-style {
width: 200px;
height: 200px;
background-color: brown;
}
.width-progress {
width: 200px;
height: 200px;
background-color: brown;
}
.transform-bgColor {
transition-property: background-color;
transition-duration: 0.5s;
}
.transition-width {
transition-property: width;
transition-duration: 1s;
}
.transition-margin {
transition-property: margin-left, margin-top;
transition-duration: 1s;
}
.transition-padding {
transition-property: padding-left, padding-top;
transition-duration: 1s;
}
.transition-background {
transition-property: background-color, opacity;
transition-duration: 1s;
}
.transition-opacity {
transition-property: opacity;
transition-duration: 1s;
}
.transition-transform {
transition-property: transform;
transition-duration: 1s;
}
.transition-border {
border-width: 5px;
border-color: brown;
border-style: solid;
transition-property: border-color;
transition-duration: 1s;
}
.transition-position {
left: 0px;
transition-property: left;
transition-duration: 1s;
}
.transition-transform-width {
transition-property: transform, width;
transition-duration: 1s;
}
</style>
