transition不会产生效果 height:auto

时间: 2020-07-27阅读: 80标签: 过渡

假设一个div要实现手风琴效果,展开时根据内容自适应高度即从height: (any)px; 变化到 height: auto;此时设置transition不会产生效果,   原因是 transition 无法将 ()px 变为不是具体数值的 auto


解决方法:

在两种状态下分别设置max-height,且自适应高度状态下时max-height设置为不可能超过的数值

.menu-list{
    position: absolute;
    z-index: 2;
    left:0;
    right: 0;
    top:48px;
    height:auto;
    max-height:20rem;   //1这里
    overflow: hidden;
    background-color:rgba(255,255,255,1);
    transition:all 0.3s cubic-bezier(0.4, 0, 1, 1); 
    visibility:visible
}
.menu-list.hide{
    height:0px;
    max-height:0;//2这里
    visibility: hidden;
}
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9535

关闭

css过渡和css动画的区别是什么?

CSS3中出现很多新的特性,其中比较好玩的3D操作就是:过渡和动画效果。那么css过渡和css动画的区别是什么?下面本篇文章就来给大家介绍一下CSS中过渡和动画的区别,希望对大家有所帮助。

基于 React 实现一个 Transition 过渡动画组件

过渡动画使 UI 更富有表现力并且易于使用。如何使用 React 快速的实现一个 Transition 过渡动画组件?实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的动画效果,也就是通过添加或移除某个 class 样式。

vue 过渡

添加过渡效果的方法:在 CSS 过渡和动画中自动应用 class,可以配合使用第三方 CSS 动画库,如 Animate.css,在过渡钩子函数中使用 JavaScript 直接操作 DOM,可以配合使用第三方 JavaScript 动画库,如 Velocity.js

Transition 过渡

在一定时间内平滑的过渡,也就是圆滑的以动画效果改变css的属性值。它的过渡可以由鼠标点击、焦点获取或者失去、被点击事件或对元素的改变中触发;不能主动触发,只能被动触发

CSS过渡属性transition与display冲突问题

当改变元素display属性时,过渡属性transition失效。display:none的时候,页面文档流中将不会存在该元素。transition无法对一个从有到无的元素产生过渡效果。

关于vue状态过渡transition不起作用的原因

总所周知,vue中的transition标签可以方便得进行动画过渡,使用的方法也很简单。这里需要主要一点的是:过渡的元素只能是以下之一:

vue.js 过渡和动画

Vue 在插入、更新或者移除 DOM 时,动态添加css类名来达到想要的动画效果,transition标签给元素包裹一个transition标签,并设置name属性的值,这个值可以随意设置

关于CSS Transition,你需要知道的事

CSS3的过渡属性,给web应用带来了简单优雅的动画,但是比起初次相见,他(transition)有许多细则。在这片文章中,我将会专研CSS3的过渡(transition)中更加复杂的部分,从链式和事件到硬件加速和动画函数。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广