javascript - 如何用纯CSS动画实现slide down效果?
阿神
阿神 2017-04-11 13:17:52
[JavaScript讨论组]

用纯CSS动画实现slide down想过几种思路:

1. 使用max-height top...配和transition

设置定宽

默认样式为
.more {
    -webkit-transition: max-height .35s ease-in-out;
     -moz-transition: max-height .35s ease-in-out;
    -o-transition: max-height .35s ease-in-out;
    transition: max-height .35s ease-in-out;
    max-height: 0;
    overflow: hidden;
}
.more.active {
    max-height: 1000px;
}

上面使用的固定的max-height,但是会影响动画效果,另外如果高度大于指定高度会显示不全,所以不能使用此方案。

通过JS动态设置max-height

之前尝试设置max-height:100%,但是无效。但是如何能够动态设置实际heightmax-height是个问题,目前我是通过获取元素的scrollHeight来设置为max-height,实现动画效果,但是需要js操作是不特别爽,这样的话我不如直接使用js动画库了。

目前我的实现代码(待改进):https://jsfiddle.net/godtail/...

2. 如果没好的方案就考虑使用js动画库来实现了。

所以如果有合适的js动画库也推荐下吧

期待解答,谢谢大家~

阿神
阿神

闭关修行中......

全部回复(3)
PHPz

max-height: 9999px;
没影响吧这样...

巴扎黑

要点击的话利用:checked状态试下?思路如下

.p{display:none}
xx:checked ~ .p{``
    display:block;
}

然后自己加动画

PHP中文网
.slide-down{
    width: 100px;
    height: 0;
    -webkit-transition: height 1s;
    -moz-transition: height 1s;
    -o-transition: height 1s;
    &.active{
        height: 100px;
    }
}

// 补充
由于高度不能固定,只能用animate中keyframes创建动画slideInDown
写了个demo,可以参考一下: https://jsfiddle.net/xiangry/...

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号