Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5992
Star 90
Fork 162
H
hello uni-app x
提交 7962d1a6 编写于 作者: DCloud-yyl's avatar DCloud-yyl
浏览文件
操作

update: css transform示例

上级 d2f20ef6
隐藏空白更改
内联 并排
Showing with 427 addition and 65 deletion
pages.json
浏览文件 @ 7962d1a6
......@@ -595,9 +595,21 @@
}
},
{
"path": "pages/CSS/transform/transform",
"path": "pages/CSS/transform/translate",
"style": {
"navigationBarTitleText": "Transform"
"navigationBarTitleText": "Translate"
}
},
{
"path": "pages/CSS/transform/scale",
"style": {
"navigationBarTitleText": "Scale"
}
},
{
"path": "pages/CSS/transform/rotate",
"style": {
"navigationBarTitleText": "Rotate"
}
},
{
......
pages/CSS/transform/rotate.uvue 0 → 100644
浏览文件 @ 7962d1a6
<template>
<!-- #ifdef APP -->
<scroll-view class="page">
<!-- #endif -->
<view class="trace">
<view class="base reserve">
<text class="reserve-text">rotate(20deg)</text>
<text class="reserve-text">转变前位置</text>
</view>
<view class="base reserve">
<text class="reserve-text">rotateX(50deg)</text>
<text class="reserve-text">转变前位置</text>
</view>
<view class="base reserve">
<text class="reserve-text">rotateY(50deg)</text>
<text class="reserve-text">转变前位置</text>
</view>
<view class="base reserve">
<text class="reserve-text">rotateZ(50deg)</text>
<text class="reserve-text">转变前位置</text>
</view>
</view>
<view class="base transform" style="transform: rotate(20deg)">
<text>rotate(20deg)</text>
<text>转变后位置</text>
</view>
<view class="base transform" style="transform: rotateX(50deg)">
<text>rotateX(50deg)</text>
<text>转变后位置</text>
</view>
<view class="base transform" style="transform: rotateY(50deg)">
<text>rotateY(50deg)</text>
<text>转变后位置</text>
</view>
<view class="base transform" style="transform: rotateZ(50deg)">
<text>rotateZ(50deg)</text>
<text>转变后位置</text>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
export default {
data() {
return {
}
},
methods: {
},
}
</script>
<style>
.page {
flex: 1;
align-items: center;
}
.trace {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
align-items: center;
}
.base {
margin: 10px;
width: 150px;
height: 150px;
align-items: center;
justify-content: center;
}
.reserve {
border: 1px dotted #588;
background-color: #DDD;
}
.reserve-text {
color: #CCC;
}
.transform {
border: 1px solid #00F;
background-color: rgba(0,255,255,0.5);
}
</style>
pages/CSS/transform/scale.uvue 0 → 100644
浏览文件 @ 7962d1a6
<template>
<!-- #ifdef APP -->
<scroll-view class="page">
<!-- #endif -->
<view class="trace">
<view class="base reserve">
<text class="reserve-text">scaleX(0.6)</text>
<text class="reserve-text">转变前位置</text>
</view>
<view class="base reserve">
<text class="reserve-text">scaleY(0.8)</text>
<text class="reserve-text">转变前位置</text>
</view>
<view class="base reserve">
<text class="reserve-text">scale(0.8,0.8)</text>
<text class="reserve-text">转变前位置</text>
</view>
</view>
<view class="base transform" style="transform: scaleX(0.6)">
<text>scaleX(0.6)</text>
<text>转变后位置</text>
</view>
<view class="base transform" style="transform: scaleY(0.6)">
<text>scaleY(0.6)</text>
<text>转变后位置</text>
</view>
<view class="base transform" style="transform: scale(1.2,1.2)">
<text>scale(1.2,1.2)</text>
<text>转变后位置</text>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
export default {
data() {
return {
}
},
methods: {
},
}
</script>
<style>
.page {
flex: 1;
align-items: center;
}
.trace {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
align-items: center;
}
.base {
margin: 10px;
width: 150px;
height: 150px;
align-items: center;
justify-content: center;
}
.reserve {
border: 1px dotted #588;
background-color: #DDD;
}
.reserve-text {
color: #CCC;
}
.transform {
border: 1px solid #00F;
background-color: rgba(0,255,255,0.5);
}
</style>
pages/CSS/transform/transform.uvue 已删除 100644 → 0
浏览文件 @ d2f20ef6
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view>
<view class="baseStyle" style="transform: translateX(120%)"
>translateX(120%)</view
>
<view class="baseStyle" style="transform: translateY(-30rpx)"
>translateY(-30rpx)</view
>
<view class="baseStyle" style="transform: translate(120%, 50%)"
>translate(120%,50%)</view
>
<view class="baseStyle" style="transform: scaleX(0.8)">scaleX(0.8)</view>
<view class="baseStyle" style="transform: scaleY(0.8)">scaleY(0.8)</view>
<view class="baseStyle" style="transform: scale(0.8, 0.8)"
>scale(0.8,0.8)</view
>
<view class="baseStyle" style="transform: rotate(20deg)"
>rotate(20deg)</view
>
<view class="baseStyle" style="transform: rotateX(50deg)"
>rotateX(50deg)</view
>
<view class="baseStyle" style="transform: rotateY(50deg)"
>rotateY(50deg)</view
>
<view class="baseStyle" style="transform: rotateZ(50deg)"
>rotateZ(50deg)</view
>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="ts">
export default {
data() {
return {}
},
methods: {},
}
</script>
<style>
.baseStyle {
background-color: cadetblue;
margin: 10rpx;
width: 300rpx;
height: 300rpx;
align-items: center;
flex: 1;
justify-content: center;
}
</style>
pages/CSS/transform/translate.uvue 0 → 100644
浏览文件 @ 7962d1a6
<template>
<!-- #ifdef APP -->
<scroll-view class="page">
<!-- #endif -->
<view class="trace">
<view class="base reserve">
<text class="reserve-text">translateX(80%)</text>
<text class="reserve-text">转变前位置</text>
</view>
<view class="base reserve">
<text class="reserve-text">translateY(50px)</text>
<text class="reserve-text">转变前位置</text>
</view>
<view class="base reserve">
<text class="reserve-text">translate(-50%, 50%)</text>
<text class="reserve-text">转变前位置</text>
</view>
</view>
<view class="base transform" style="transform: translateX(80%)">
<text>translateX(80%)</text>
<text>转变后位置</text>
</view>
<view class="base transform" style="transform: translateY(50px)">
<text>translateY(50px)</text>
<text>转变后位置</text>
</view>
<view class="base transform" style="transform: translate(-50%, 50%)">
<text>translate(-50%,50%)</text>
<text>转变后位置</text>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
export default {
data() {
return {
}
},
methods: {
},
}
</script>
<style>
.page {
flex: 1;
align-items: center;
}
.trace {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
align-items: center;
}
.base {
margin: 10px;
width: 150px;
height: 150px;
align-items: center;
justify-content: center;
}
.reserve {
border: 1px dotted #588;
background-color: #DDD;
}
.reserve-text {
color: #CCC;
}
.transform {
border: 1px solid #00F;
background-color: rgba(0,255,255,0.5);
}
</style>
pages/tabBar/CSS.uvue
浏览文件 @ 7962d1a6
......@@ -318,17 +318,32 @@
] as Page[],
},
{
id: 'animate',
name: '动画',
id: 'transform',
name: 'transform',
open: false,
pages: [
{
name: 'transition',
url: '/pages/CSS/transition/transition',
name: 'translate',
url: '/pages/CSS/transform/translate',
},
{
name: 'scale',
url: '/pages/CSS/transform/scale',
},
{
name: 'transform',
url: '/pages/CSS/transform/transform',
name: 'rotate',
url: '/pages/CSS/transform/rotate',
},
] as Page[],
},
{
id: 'transition',
name: 'transition',
open: false,
pages: [
{
name: 'transition',
url: '/pages/CSS/transition/transition',
},
] as Page[],
},
......
pages/template/drop-card/drop-card@old.uvue 0 → 100644
浏览文件 @ 7962d1a6
<template>
<view class="root">
<view class="card"
:style="{'top':Math.abs(x)/-60 + 90 +'px',transform:'scale('+(movePercent/10+0.80)+')','height':cardHeight+'px'}">
<image class="user-img" :src="userList[0]" :style="{'height':cardHeight+'px'}"></image>
</view>
<view class="card"
:style="{'top':Math.abs(x)/-30 + 45 +'px',transform:'scale('+(movePercent/10+0.90)+')','height':cardHeight+'px'}">
<image class="user-img" :src="userList[1]" :style="{'height':cardHeight+'px'}"></image>
</view>
<view @touchmove="touchmove" @touchstart="touchstart" @touchend="touchend"
:style="{'transform':'translate('+x+'px,'+y+'px) rotate('+x/-30+'deg)','height':cardHeight+'px'}" class="card">
<image class="user-img" :src="userList[2]" :style="{'height':cardHeight+'px'}"></image>
<view class="state">
<image class="state-icon like" :style="{'opacity':x < 0 ? 0 : movePercent * 10}" src="/static/template/drop-card/like.png" mode="widthFix"></image>
<image class="state-icon dislike" :style="{'opacity':x > 0 ? 0 : movePercent * 10}" src="/static/template/drop-card/dislike.png" mode="widthFix"></image>
</view>
</view>
</view>
</template>
<script lang="ts">
let sX : number = 0,
sY : number = 0,
screenWidth : number = 1;
export default {
data() {
return {
x: 0,
y: 0,
cardHeight:1,
userList: [
'/static/template/drop-card/1.jpg',
'/static/template/drop-card/2.jpg',
'/static/template/drop-card/3.jpg'
]
}
},
computed: {
movePercent() : number {
return Math.abs(this.x) / screenWidth
},
likeOpacity() : number{
return this.x < 0 ? 0 : this.movePercent * 100
},
dislikeOpacity() : number{
return this.x > 0 ? 0 : this.movePercent * 100
}
},
onLoad() {
uni.getSystemInfo({
success: (e) => {
console.log('e',e);
screenWidth = e.screenWidth
this.cardHeight = e.screenHeight - 200
}
})
},
methods: {
changeUserList() {
let user:string = this.userList[this.userList.length - 1]
this.userList.unshift(user)
this.userList.pop()
this.x = 0;
this.y = 0;
},
touchstart(e : TouchEvent) {
sX = e.touches[0].screenX;
sY = e.touches[0].screenY;
},
touchmove(e : TouchEvent) {
this.x += e.touches[0].screenX - sX;
this.y += e.touches[0].screenY - sY;
sX = e.touches[0].screenX;
sY = e.touches[0].screenY;
},
touchend() {
if (this.x > screenWidth / 6) {
let interval : number = 0;
interval = setInterval(() => {
this.x += 10
this.y += 3
if (this.x > screenWidth) {
clearInterval(interval)
this.changeUserList()
}
}, 6)
} else if (this.x < screenWidth * -1 / 6) {
let interval : number = 0;
interval = setInterval(() => {
this.x -= 10
this.y += 3
if (this.x < -screenWidth) {
clearInterval(interval)
this.changeUserList()
}
}, 6)
} else {
this.x = 0
this.y = 0
}
}
}
}
</script>
<style>
.root {
flex: 1;
position: relative;
}
.card {
width: 700rpx;
height: 750rpx;
position: absolute;
margin: 0 25rpx;
margin-top: 30px;
border-radius: 10px;
color: #FFF;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.user-img{
border-radius: 10px;
}
.state {
top: 20rpx;
left: 20rpx;
width: 650rpx;
padding: 4px;
position: absolute;
flex-direction: row;
justify-content: space-between;
}
.state-icon {
width: 30px;
height: 30px;
border: 1px solid #FFF;
background-color: #FFF;
padding: 3px;
border-radius: 100px;
box-shadow: 0 0 1px #EBEBEB;
}
</style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或