css - CSS3 过渡流程问题

Question

我在 this page 上设置了背景转换.

页面的第一个区域“Il Blog - Leggi tutti gli articoli”和“Gli Eventi - Leggi tutti gli eventi”显示了不同帖子类型的列表瓷砖。 当悬停在其中之一上时，过渡开始。 当鼠标移出时，另一个过渡开始。 直到那里一切都很好。

当我在转换完成之前将鼠标移出图 block 时出现问题。

我想弄清楚我的 CSS 中缺少什么，但找不到。

我知道我可能可以解决将过渡转移到 jQuery 脚本的问题，但我更喜欢使用纯 CSS 方法。

以下是所涉及元素的 SCSS 摘录:

article {

    @include box-shadow(0 0 2px $primary-color);
    @include transition(all 1s ease-in-out);
    @include border-radius(2px);

    background-image: url('../images/concrete_wall.png');

    &:hover {
      @include box-shadow(0 0 4px $primary-color);
      background-image: url('../images/concrete_wall_2.png');

    }
}

这是生成的 CSS，以防有人喜欢这样看:

body.home #posts-area #posts-area-columns #home-posts-list article, body.home #posts-area #posts-area-columns #featured-events-list article {
  -webkit-box-shadow: 0 0 2px #222222;
  -moz-box-shadow: 0 0 2px #222222;
  box-shadow: 0 0 2px #222222;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  background-image: url("../images/concrete_wall.png");
}
/* line 60, ../sass/_home.scss */
body.home #posts-area #posts-area-columns #home-posts-list article:hover, body.home #posts-area #posts-area-columns #featured-events-list article:hover {
  -webkit-box-shadow: 0 0 4px #222222;
  -moz-box-shadow: 0 0 4px #222222;
  box-shadow: 0 0 4px #222222;
  background-image: url("../images/concrete_wall_2.png");
}

Answer 1

您在悬停中包含的第二个过渡是无用的。缓入淡出使其淡入淡出。

article {

    @include box-shadow(0 0 2px $primary-color);
    @include transition(all 1s ease-in-out); //Note i changed it to eas-in-out
    @include border-radius(2px);

    background-image: url('../images/concrete_wall.png');

    &:hover {
      @include box-shadow(0 0 4px $primary-color);
      background-image: url('../images/concrete_wall_2.png');
      //Note I removed the unnecessary transition
    }
}