提交 b27bbe7c 编写于 作者: 张磊

调整transition示例,添加异步创建view的示例

上级 9c3ba1ad
<template> <template>
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view style="flex:1;"> <scroll-view style="flex:1;" v-if="isShow">
<!-- #endif --> <!-- #endif -->
<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 class="adjust">对图片设置transform进行旋转,在旋转完成的transitionend事件后,继续旋转</text> <text class="adjust">对图片设置transform进行旋转,在旋转完成的transitionend事件后,继续旋转</text>
...@@ -18,9 +18,24 @@ ...@@ -18,9 +18,24 @@
element: null as UniElement | null, element: null as UniElement | null,
isStart: false, isStart: false,
buttonValue: "开启图片旋转", buttonValue: "开启图片旋转",
onTransitionEndTriggr: false onTransitionEndTriggr: false,
isShow: false
} }
}, },
onReady() {
// #ifdef APP-ANDROID
var that = this
class ThreadRunnable extends Runnable {
override run() {
that.isShow = true
}
}
new Thread(new ThreadRunnable()).start()
// #endif
// #ifndef APP-ANDROID
this.isShow = true
// #endif
},
methods: { methods: {
switchBtn() { switchBtn() {
if (!this.isStart) { if (!this.isStart) {
...@@ -53,17 +68,18 @@ ...@@ -53,17 +68,18 @@
</script> </script>
<style> <style>
.adjust { .adjust {
margin: 10px; margin: 10px;
} }
.transition-transform {
width: 200px; .transition-transform {
height: 200px; width: 200px;
margin: 25px auto; height: 200px;
border-radius: 100px; margin: 25px auto;
transition-duration: 2000ms; border-radius: 100px;
transition-property: transform; transition-duration: 2000ms;
transition-timing-function: linear; transition-property: transform;
transform: rotate(0deg); 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.
先完成此消息的编辑!
想要评论请 注册