|
发两个示例:
<template>
<view class='page'>
<button onclick="testTransform('translate')">translate</button>
<button onclick="testTransform('rotate')">rotate</button>
<button onclick="testTransform('scale')">scale</button>
<button onclick="testTransform('size')">size</button>
<view id='view1' class={"polaroid " + transform} onclick='testTransform()'>
<span>视图</span>
</view>
</view>
</template>
<script>
export default {
apiready() {},
data() {
return {
showing: true,
transform: ''
};
},
methods: {
testTransform(t) {
if(!t){
this.data.transform = 'hidden';
this.data.showing = false;
return;
}
if(this.data.showing){
this.data.transform = 'hidden';
this.data.showing = false;
}else{
this.data.transform = 'show ' + t;
this.data.showing = true;
}
setTimeout(function(){
console.log('width: ' + $('#view1').offsetWidth);
}, 500);
}
}
};
</script>
<style>
.page {
height: 100%;
background-color:white;
}
.polaroid {
width:150px;
height:150px;
background-color:#FFC;
/*box-shadow: 5px 5px 5px rgba(9, 15, 39, 0.5);*/
}
#view1{
justify-content:center;
align-items:center;
transition-property: all;
transition-duration: 0.5s;
}
.hidden{
opacity: 0.2;
width:150px;
height:150px;
transform: translate(0px, 0px) rotate(0deg) scale(1.0, 1.0);
visibility:hidden;
}
.show{
opacity: 1.0;
visibility:visible;
}
.rotate{
transform:rotate(25deg);
}
.scale{
transform: scale(1.5, 1.5);
}
.translate{
transform: translate(50px, 50px);
}
.size{
width:250px;
height:250px;
}
</style>
|
|