提交 e4feec19 编写于 作者: DCloud-yyl's avatar DCloud-yyl

web端与app端截图差异优化:避免在条件编译中的scroll-view中设置style

上级 6e378556
<template> <template>
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view style="flex:1;padding: 10px;"> <scroll-view style="flex:1;">
<!-- #endif --> <!-- #endif -->
<button @click="switchBtn">{{buttonValue}}</button>
<image class="transition-transform" id="transition-transform" @transitionend="onEnd" src="/static/uni.png"></image> <image class="transition-transform" id="transition-transform" @transitionend="onEnd" src="/static/uni.png"></image>
<text>对图片设置transform进行旋转,在旋转完成的transitionend事件后,继续旋转</text> <text class="adjust">对图片设置transform进行旋转,在旋转完成的transitionend事件后,继续旋转</text>
<button class="adjust" @click="switchBtn">{{buttonValue}}</button>
<!-- #ifdef APP --> <!-- #ifdef APP -->
</scroll-view> </scroll-view>
<!-- #endif --> <!-- #endif -->
...@@ -52,14 +52,17 @@ ...@@ -52,14 +52,17 @@
</script> </script>
<style> <style>
.transition-transform { .adjust {
width: 200px; margin: 10px;
height: 200px; }
margin: 25px auto; .transition-transform {
border-radius: 100px; width: 200px;
transition-duration: 2000ms; height: 200px;
transition-property: transform; margin: 25px auto;
transition-timing-function: linear; border-radius: 100px;
transform: rotate(0deg); transition-duration: 2000ms;
} transition-property: transform;
transition-timing-function: linear;
transform: rotate(0deg);
}
</style> </style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册