Question

我想复制你在图片中看到的效果：http://www.akqa.com/work/

我认为这是必要的代码，但它不起作用。缺少什么？

Classroom.prototype.find = function(name) {
  var studentNames = this.students.map(x=>x.firstName);
  var index = studentNames.indexOf(name);
  return this.students.splice(index, 1);
};

Answer 1

这里有三个错误。

首先opacity .4s,transform .4s不是有效的CSS声明。

正确的语法如下所示：

div {
    -webkit-transition: opacity .4s ease .4s;
    transition: opacity .4s ease .4s;
}

其次，transition规则意味着第一个和第二个实例有不同的值（如果您愿意，则为A点和B点）。在下面的示例中，您会注意到我已指定opacity:0;，除非div有一个类.showing，在这种情况下，它现在有一条规则opacity:1;

div {
    opacity: 0;
    -webkit-transition: opacity .4s ease .4s;
    transition: opacity .4s ease .4s;
}

div.showing {
    opacity: 1;
}

最后，您还需要来将div的状态更改为＆＃34;让它知道需要更改它的不透明度＆＃34;。我们已经在上面的CSS中告诉它，当它有一个类.showing时，它的不透明度是不同的。

一个很好的方法是在页面完全加载后添加一个小的jQuery脚本给它新的类。

jQuery(window).load(function(){
    $('div').addClass('showing');
});

Answer 2

鼠标悬停在图像上后，您是否专注于文本弹出效果？如果是的话，我从html和css文件中做了一些跟踪。

<article class="work-item in-view" ...>    
 <picture>
  <source></source>
  <source></source>
  <source></source>
  <img></img>
  <div class=content>
    /* pop up text content*/
  </div>
 </picture>
</article>

.work-item {
background-color: #000;
cursor: pointer;
float: left;
overflow: hidden;
position: relative;
width: 100%
}

.work-item .content {
background-color: rgba(0,0,0,0);
bottom: 0;
color: #FFF;
height: 100%;
left: 0;
padding: 0 30px;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color .4s;
transition: background-color .4s;
width: 100%
}

我希望这些发现对您有所帮助。如果方向正确，您可以从css中获取'work-item'和'content'并遵循逻辑。

页面加载时的CSS转换

2 个答案: