1

我正在研究我的作品集，我正在尝试一些淡入淡出的视差效果。

我更喜欢动画的 CSS3 过渡，我只使用 Jquery 路点来触发它。

在 Firefox 中淡入效果很好，整个 div 淡入，但是在 Mac 上的 Chrome 和 Safari 中，div 的背景图像不会淡入，它只是跳入。

例如检查（模糊部分应该淡入） http://www.jasperaarts.com/2013/#work

我以这种方式添加或删除类 active_item 或 inactive_item 触发 CSS 转换。

.active_item {

    -webkit-opacity: 1.0;
    -moz-opacity: 1.0;
    -ms-opacity: 1.0;
    -o-opacity: 1.0;
    opacity: 1.0;

    -webkit-transition: opacity 1000ms ease 500ms;
    -moz-transition: opacity 1000ms ease 500ms;
    -ms-transition: opacity 1000ms ease 500ms;
    -o-transition: opacity 1000ms ease 500ms;
    transition: opacity 1000ms ease 500ms;
}
.inactive_item {

    -webkit-opacity: 0;
    -moz-opacity: 0;
    -ms-opacity: 0;
    -o-opacity: 0;
    opacity: 0;
}

我尝试过的替代方法是 Jquery fadeIn 和 fadeOut 或 Jquery 中的 Animate css 都显示类似的结果。

4

1 回答 1

0

Thanks to Godwin, I have narrowed it down to a compatibility issue with Isotope.js script and the Parallax css.

于 2013-07-09T06:23:23.963 回答