网站 › 『编程语言讨论求助区』 › css的transition实现元素显示和隐藏的过渡动画

cqwcns 发表于 2021-4-4 07:28

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

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

先写一个CSS。
.transition {
    transition: all .5s ease;
    overflow: hidden;
}

再写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 发表于 2021-4-4 09:36

前端也不错

fengchun8196 发表于 2021-4-4 09:41

前端也不错，厉害

AndyWAPJ 发表于 2021-4-4 09:46

楼主可以啊

cqwcns 发表于 2021-4-4 12:48

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

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

算是没办法中的办法吧。

cube 发表于 2021-4-5 14:10

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

查看完整版本: css的transition实现元素显示和隐藏的过渡动画