【问题标题】:Transition height not working过渡高度不起作用
【发布时间】:2013-10-20 14:33:34
【问题描述】:

我正在尝试创建一个简单的 CSS transition 来更改方形框的 heightwidthwidth 似乎随着动画而变化,但 height 没有动画。我怎样才能解决这个问题?或者我在这里做错了什么?

p {
  width: 100px; 
  height: 200px; 
  transition: width 3s;
}

p:hover {
  width: 300px; 
  height 500px;
}

【问题讨论】:

  • 'transition: width 3s' 应该表示什么...

标签: html css css-transitions transitions


【解决方案1】:

如果你真的想保持自动高度,我发现使用 最大高度:自动; 对于元素的结束状态和 最大高度:0px (或任何你开始的)初始属性保持过渡和自动高度调整。

【讨论】:

    【解决方案2】:

    对于transitionwidthheight,您必须更改转换设置,如下所示:

    p {width: 100px; height: 200px; transition: all 3s;}
    

    您的代码在p:hover 内的height 属性设置中也缺少:

    p:hover {
      width: 300px; 
      height: 500px; /* added missing : */
    }
    

    p {
      display: block;
      border: 1px solid black;
    }
    p {
      width: 100px;
      height: 200px;
      transition: all 3s;
    }
    p:hover {
      width: 300px;
      height: 500px;  /* added missing : */
    }
    <p>abcd</p>

    godfrzero's answer 中所述,如果您只想转换heightwidth(而不是任何其他属性的值更改),请不要使用all 方法。

    【讨论】:

      【解决方案3】:

      如果您确定只想为 heightwidth 属性而不是所有 CSS 属性设置动画,您也可以这样做:

      p:hover {
        height: 300px;
        width: 500px;
        transition: height, width linear 3s;
      }
      

      您当前的 CSS 代码仅指示浏览器为宽度设置动画。

      【讨论】:

      • +1。啊,对了,我正要说单独做高度和宽度,但现在你已经添加了它,我已经将它添加到我的答案中,并在你的帖子中提及。希望你不介意:)
      猜你喜欢
      • 2011-08-30
      • 1970-01-01
      • 2012-01-15
      • 2012-12-05
      • 2014-11-07
      • 2013-10-20
      • 1970-01-01
      • 2018-08-01
      • 2013-10-01
      相关资源
      最近更新 更多