You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

160 lines
3.4 KiB

<template>
<view>
<uni-card is-full :is-shadow="false">
<text class="uni-h6">过渡动画通常用于元素的过渡效果例如淡隐淡出效果遮罩层的效果放大缩小的效果等</text>
</uni-card>
<uni-section title="示例" type="line">
<view class="example">
<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
:show="show"><text class="text">示例元素</text></uni-transition>
</view>
</uni-section>
<uni-section title="操作" subTitle="点击按钮 ,切换动画效果" type="line">
<view class="example-body">
<button class="transition-button" type="primary" @click="handle('fade')">淡隐淡出</button>
<button class="transition-button" type="primary" @click="handle(['fade', 'slide-top'])">由上至下</button>
<button class="transition-button" type="primary" @click="handle(['fade', 'slide-right'])">由右至左过</button>
<button class="transition-button" type="primary" @click="handle(['fade', 'zoom-in'])">由小到大过</button>
<button class="transition-button" type="primary" @click="custom">自定义动画</button>
</view>
</uni-section>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
show: true,
modeClass: 'fade',
styles: {}
}
},
onLoad() {
// #ifdef APP-NVUE
this.styles = {
justifyContent: 'center',
alignItems: 'center',
width: '100px',
height: '100px',
borderRadius: '5px',
textAlign: 'center',
backgroundColor: '#4cd964',
boxShadow: '0 0 5px 1px rgba(0,0,0,0.2)'
}
// #endif
},
methods: {
handle(type) {
this.show = !this.show
this.modeClass = type
},
custom() {
// TODO 下面修改宽高在百度下还有些问题待修复
// this.$refs.ani.step({
// width: '200px'
// })
// this.$refs.ani.step({
// height: '150px'
// },{
// delay:100,
// duration:200
// })
this.$refs.ani.step({
width: '100px',
height: '100px',
rotate: '180'
}, {
delay: 200,
duration: 300
})
this.$refs.ani.step({
width: '100px',
height: '100px',
rotate: '0'
}, {
transformOrigin: '50% 50%'
})
this.$refs.ani.step({
translateX: '-100px'
}, {
timingFunction: 'ease-in',
duration: 100
})
this.$refs.ani.step({
translateX: '100px'
}, {
timingFunction: 'ease',
duration: 300
})
this.$refs.ani.step({
translateX: '50px',
scale: 1.5
}, {
timingFunction: 'linear',
duration: 100
})
this.$refs.ani.step({
translateX: '0px',
scale: 1
}, {
timingFunction: 'linear',
duration: 150
})
this.$refs.ani.run()
}
}
}
</script>
<style lang="scss">
.example {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
height: 150px;
background-color: #fff;
}
.example-body {
padding: 10px 20px;
padding-bottom: 0px;
}
.transition-button {
/* #ifndef APP-NVUE */
width: 100%;
/* #endif */
flex: 1;
margin-bottom: 10px;
}
/* #ifndef APP-NVUE */
.example ::v-deep .transition {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
border-radius: 5px;
text-align: center;
background-color: #4cd964;
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
}
/* #endif */
.text {
font-size: 14px;
color: #fff;
}
</style>