Question

我今天早上在StackOverflow上发现了CSS转换（我是一个较新的Web开发人员，请注意。）我试图通过添加一个漂亮的淡入淡出来重新打造我正在构建的其中一个站点。影响我的链接颜色变化＆amp;我的div悬停效果在我的页面上。效果很好，但我注意到一个奇怪的延迟，希望有人可以帮助我。

问题：当我有嵌套的元素都应该接收转换时，它们不会同时发生，它们正在等待父转换停止，然后子转换开始。

HTML ：注意 - 这通常是剃刀文本，但我提供的原始HTML没有任何C＃语法

                  <div class="image-caption">
                    <h1>Heading</h1>
                    <p>Hello world, I am an example paragraph.</p>
                    <a href="#" target="_self">
                      <div class="image-link">
                           Link Text!
                      </div>
                    </a>
                  </div>

CSS / LESS ：我正在寻找一种方法来快速转换所有div＆amp;链接效果在我的网站上顺利淡出。我在StackOverflow上找到了下面的代码并注意到如果我没有包含：hover＆amp; ：焦点选择器，当页面加载时，页面上的所有链接都会从相当大的大小过渡到正常大小，看起来很有趣。

div, a, i{
   &:hover, &:focus {
        -o-transition: .5s;
        -moz-transition: .5s;
        -webkit-transition: .5s;
        transition: .5s;
    }
}

以下是标题实际样式的代码。

.image-caption {
 //irrelevant CSS removed here
   a {
   &:hover, &:focus{
   color: rgba(19, 56, 97, 1.0);

     .image-link{
      border-color: rgba(19, 56, 97, 1.0);
      }
    }
  }
}

Answer 1

直接在选择器上使用过渡属性（不在悬停和焦点状态下）

div, a, i {
  -o-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
}

Answer 2

我能够通过删除全局DIV / I / A转换规则上的DIV声明，然后创建一些mixin来处理这样的独立转换案例。

新的全球规则＆amp; Mixins ：

a, i {
    &:hover, &:focus {
        -o-transition: .5s;
        -moz-transition: .5s;
        -webkit-transition: .5s;
        transition: .5s;
    }
}

.no-fade() {
    -moz-transition: none;
    -o-transition: none;
    -webkit-transition: none;
    transition: none;
}

.make-fade() {
    -o-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
}

新CSS / LESS同时淡化巢： - （澄清，.image-link是DIV）

a {
    font-family: 'Source Sans Pro';
    color: #FEFEFE;
    text-transform: uppercase;
    font-size: 18px;

    &:hover, &:focus {
        color: rgba(19, 56, 97, 1.0);
        .no-fade();

        .image-link {
            .make-fade();
            border-color: rgba(19, 56, 97, 1.0);
        }
    }

CSS转换延迟

2 个答案: