Question

我已在this page设置了后台转换。

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

问题显示在转换完成之前将鼠标移出磁贴时。

我想知道我的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
    }
}

CSS3过渡流问题

1 个答案: