提交 5c31914c 编写于 作者: 张磊

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

上级 8e4997f0
<template>
<!-- #ifdef APP -->
<scroll-view style="flex:1;">
<scroll-view style="flex:1;" v-if="isShow">
<!-- #endif -->
<image class="transition-transform" id="transition-transform" @transitionend="onEnd" src="/static/uni.png"></image>
<text class="adjust">对图片设置transform进行旋转,在旋转完成的transitionend事件后,继续旋转</text>
......@@ -18,9 +18,24 @@
element: null as UniElement | null,
isStart: false,
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: {
switchBtn() {
if (!this.isStart) {
......@@ -53,17 +68,18 @@
</script>
<style>
.adjust {
margin: 10px;
}
.transition-transform {
width: 200px;
height: 200px;
margin: 25px auto;
border-radius: 100px;
transition-duration: 2000ms;
transition-property: transform;
transition-timing-function: linear;
transform: rotate(0deg);
}
.adjust {
margin: 10px;
}
.transition-transform {
width: 200px;
height: 200px;
margin: 25px auto;
border-radius: 100px;
transition-duration: 2000ms;
transition-property: transform;
transition-timing-function: linear;
transform: rotate(0deg);
}
</style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册