css - 尝试对类更改进行 CSS 转换

Question

想知道当 div 被赋予某个类时是否有办法进行 css 转换。我最好的例子是这个网站http://ideaware.co/

当您向下滚动并且标题变为固定时，它会更改背景颜色并具有不透明度。真的很好看。

我正在处理我在这里http://www.niviholdings.com/collide/的模板，我想做的是当 < nav > 固定时，我希望 < ul > 向右滑动。

希望我能正确解释这一点。

Answer 1

想知道当 div 被赋予某个类时是否有办法进行 css 转换。

你当然可以...

document.querySelector('#header').addEventListener('click', function(e) {
    e.target.classList.toggle('transition');
})

#header {
    background: red;
    padding: 10px 0;
    position: relative;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
    left:0;
}

#header.transition {
    background: green;
    left: 50px;
}

<div id="header">Click me to toggle class</div>

演示

Answer 2

我发现 2 点可能会有所帮助：

从auto固定值转换可能是个问题。最终，您可以尝试将 的 设置margin-left为.main-nav-ul默认的固定值，而不仅仅是在粘性时。

第二个是（这是hacky）。尝试为您的.main-nav-ul延迟申请课程：

setTimeout(function() {
    $('.main-nav-ul').addClass('nav-slide'); // line 57 in jquery.sticky.js
}, 100);

Answer 3

CSS 转换只需 4 个简单步骤

1. 确保使用 CSS 过渡可以实现您想要做的事情。您可以通过查看 W3C 文档来做到这一点。

2. 将过渡和您的起始样式添加到您的基本元素。

3. 添加样式已更改的类或状态。

4. 添加添加类的机制（如果适用）。

简单的例子，假设你想在:hover. 你只需这样做：

element {
  margin-left: 10px;
  transition: margin-left linear .5s;
}

element:hover {
  margin-left: 0;
}

这是一个快速演示。