css的transition实现元素显示和隐藏的过渡动画

cqwcns

微信小程序，我希望元素的显示和隐藏有一个动画过渡效果，我一开始是这样写的：

先写一个CSS。

[CSS] 纯文本查看 复制代码

.transition {
    transition: all .5s ease;
    overflow: hidden;
}

再写HTML。

[HTML] 纯文本查看 复制代码

	<!-- 搜索设置 -->
	<view class="transition" style="{{searchBarFocus?'height: 180rpx;opacity: 1;':'height: 0;opacity: 0;'}}">
		<view class="margin-lr-lg solid-top flex align-center" style="height:90rpx">
			<view>
				<switch checked="{{justQueryMe}}" bindchange="bindJustQueryMeSwitch" />
				<text class="margin-left-sm">仅查询我的工单<text wx:if="{{staffData}}"
						class="text-sm">（{{staffData.staffName}}/{{staffData.staffPhoneNumber}}）</text>
					<text wx:if="{{!staffData}}" class="text-sm">（未登录）</text></text>
			</view>
		</view>
		<view class="margin-lr-lg flex align-center" style="height:90rpx">
			<view>
				<switch checked="{{justIncomplete}}" bindchange="bindJustIncompleteSwitch" />
				<text class="margin-left-sm">仅查询未完成的工单</text>
			</view>
		</view>
	</view>
	<!-- 搜索设置栏结束 -->

测试，发现功能实现了，但美中不足，我写死了高度180rpx。
我希望这个高度不要写死，避免元素被内容撑大是动画等适用，于是我尝试将height: 180rpx改为height: auto。但发现这样是不行的，动画过渡效果没有了。
对于这个问题，各位有什么高见？请指教，谢谢。

399998yyy

前端也不错

fengchun8196

前端也不错，厉害

AndyWAPJ

楼主可以啊

cqwcns

我查了一遍，好像主流的方法是用max-height来代替height。

不过要注意max-height也不要设置过大。

算是没办法中的办法吧。

cube

height 可以用百分比,可以用rem rm等等.