如果元素原本高度是200，相增加到500，不行，但可以减少到100。为什么这个高度值，只能减少，不能增加
ITMister
- 发布：2020-12-08 18:52
- 更新：2020-12-10 17:40
- 阅读：1348
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 2.9.8
手机系统： Android
手机系统版本号： Android 10
手机厂商： 华为
手机机型： mate 30 5G
页面类型： nvue
打包方式： 云端
项目创建方式： HBuilderX
操作步骤：
预期结果：
如果元素原本高度是200，相增加到500，不行，但可以减少到100。为什么这个高度值，只能减少，不能增加
如果元素原本高度是200，相增加到500，不行，但可以减少到100。为什么这个高度值，只能减少，不能增加
实际结果：
如果元素原本高度是200，相增加到500，不行，但可以减少到100。为什么这个高度值，只能减少，不能增加
如果元素原本高度是200，相增加到500，不行，但可以减少到100。为什么这个高度值，只能减少，不能增加
bug描述：
weex animation动画，安卓端，高度只能减少，不能增加
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<view class="button-click">
<button type="default" class="height-change" @click="heightChange">增高</button>
<button type="default" class="height-change" @click="lowerChange">减矮</button>
</view>
<view ref="weexel" class="weex-bug">
</view>
</view>
</template>
<script>
// #ifdef APP-PLUS-NVUE
const animation = weex.requireModule('animation');
// #endif
export default {
data() {
return {
title: '原本高度150,增高到800，减矮到100'
}
},
onLoad() {
},
methods: {
heightChange(){
let ele = this.$refs.weexel;
animation.transition(ele, {
styles: {
height: 800,
},
duration: 300, //ms
timingFunction: 'linear',
delay: 0 //ms
});
},
lowerChange(){
let ele = this.$refs.weexel;
animation.transition(ele, {
styles: {
height: 50,
},
duration: 300, //ms
timingFunction: 'linear',
delay: 0 //ms
});
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
.button-click{
flex-direction: row;
}
.weex-bug{
margin-top: 20rpx;
width: 400rpx;
height: 150px;
background-color: red;
}
.height-change{
margin-top: 30rpx;
margin: 20rpx;
}
</style>
ITMister (作者) - 新来的程序员
此问题解决方案：
第一步，给要改变高度的元素动态设置两个CSS3动画类
第二步，给要改变高度的元素动态设置一个高
第三步，在methods中动态修改高度值即可，实现改变高度的动画。并且完美兼容APP,H5,MP等
代码如下：
<template>
<view>
<view style="flex-direction: row;margin-bottom: 30rpx;">
<button type="default" @click="heightChange">增高</button>
<button type="default" @click="lowerChange">减矮</button>
</view >
<view class="my-height" :class="[isHeight?'show-height':'hide-height']" :style="{height:Height+'rpx'}">
</view>
</view >
</template>
<script>
export default {
data() {
return {
isHeight:false,
Height:200,
};
},
methods:{
heightChange(){
this.Height = 800;
},
lowerChange(){
this.Height = 200
}
}
}
</script>
<style lang="scss">
.my-height{
position: fixed;
left: 0;
right: 0;
bottom: 0;
background-color: red;
}
.show-height,.hide-height{
transition-property:height;
transition-duration: 0.2s;
transition-timing-function:ease;
}
</style>
经验证未设置needLayout时安卓和iOS增加高度时确实存在存在差异，已反馈给相关组处理，已加分，感谢您的反馈！
-
-
ITMister (作者)
您好，关于这个问题，我发现了新的情况，昨天在提交BUG的时候，没注意到一个问题，苹果端确实是可以增高，但是，好像只能往下增加高度。
我在昨天的案例上，在那个红色的区域加了一个position: fixed;bottom: 100px;我的理解，和我想要的都是，它应该往上增加高度，但实际上，它只会往下增加高度。
请确认2020-12-09 11:09
-
-
ITMister (作者) - 新来的程序员
您好，关于这个问题，我发现了新的情况，昨天在提交BUG的时候，没注意到一个问题，苹果端确实是可以增高，但是，好像只能往下增加高度。
我在昨天的案例上，在那个红色的区域加了一个position: fixed;bottom: 100px;我的理解，和我想要的都是，它应该往上增加高度，但实际上，它只会往下增加高度。
