CSS过渡忽略宽度 [英] CSS transition ignores width

问题描述

我有一个标签，该标签显示为块.在页面加载时，其宽度通过css animation (css 动画)从零增加到包含div的某个百分比(小提琴包含MWE，但是该div中有多个链接，每个链接都有不同的链接宽度).悬停时，我希望它使用CSS 过渡来更改颜色，更改背景颜色并扩展到div的100％.颜色和背景色位有效，但似乎忽略了宽度过渡.

I have an tag which is displayed as a block. On page load, its width is increased by a css animation from zero to some percentage of the containing div (the fiddle contains a MWE, but there is more than one link in this div, each with a different width). On hover, I want it to change colour, change background colour, and also expand to 100% of the div, using a CSS transition. The colour and background colour bit is working, but it seems to ignore the width transition.

摘要:

.home-bar {
  text-decoration: none;
  background-color: white;
  color: #5e0734;
  display: block;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  transition: color, background-color, width 0.2s linear;/*WIDTH IGNORED*/
  border: 2px solid #5e0734;
  overflow: hidden;
  white-space: nowrap;
  margin-right: 0;
  margin-left: 5px;
  margin-top: 0;
  margin-bottom: 5px;
  padding: 0;
}

.home-bar:hover {
  background-color: #5e0734;
  color: white;
  width: 100%;/*WIDTH IGNORED*/
  text-decoration: none;
}

#bar0 {
  -webkit-animation-name: grow0;
  animation-name: grow0;
}

@keyframes grow0 {
  from {
    width: 0%;
  }
  to {
    width: 75%;
  }
}

<a href="#" id="bar0" class="home-bar">LINK</a>

注意-我已经通过在悬停时更改链接的高度对其进行了测试，并且可以正常工作.仅宽度无效.也许与页面加载时的动画有关.

Note - I've tested it with changing the height of the link on hover, and it worked. Only the width does not work. Perhaps it has something to do with the animation on page-load.

推荐答案

使用动画设置宽度时，您将覆盖由CSS定义的任何其他宽度，包括由hover定义的宽度.关键帧内的样式比其他任何样式都更具体:

When you set width using animation you will override any other width defined with CSS inluding the one defined by hover. The styles inside a keyframes is more specific than any other styles:

CSS动画会影响计算出的属性值.这种影响发生在 将指定的值添加到CSS级联([CSS3CASCADE])(在 级别的CSS动画)，将产生正确的计算值 动画的当前状态.根据 [CSS3CASCADE] 的定义， 动画会覆盖所有常规规则，但会被！important覆盖 规则. ^参考

CSS Animations affect computed property values. This effect happens by adding a specified value to the CSS cascade ([CSS3CASCADE]) (at the level for CSS Animations) that will produce the correct computed value for the current state of the animation. As defined in [CSS3CASCADE], animations override all normal rules, but are overridden by !important rules. ^ref

一种解决方法是同时考虑width/max-width属性以避免这种混淆:

A workaround is to consider both width/max-width properties to avoid this confusion:

.home-bar {
  text-decoration: none;
  background-color: white;
  color: #5e0734;
  display: block;
  animation: grow0 1.5s forwards;
  transition: color, background-color, max-width 0.2s linear;
  border: 2px solid #5e0734;
  max-width: 75%; /*Set max-wdith*/
}

.home-bar:hover {
  background-color: #5e0734;
  color: white;
  max-width: 100%; /* Update the max-width of hover*/
  text-decoration: none;
}

/*Animate width to 100%*/
@keyframes grow0 {
  from {
    width: 10%;
  }
  to {
    width: 100%;
  }
}

<a href="#" id="bar0" class="home-bar">LINK</a>

这篇关于CSS过渡忽略宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！