CSS转换只需4个步骤

Question

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

当您向下滚动并且标题变得固定时，它会进行背景颜色更改并具有不透明度。非常好看。

我正在制作一个我在这里的模板http://www.niviholdings.com/collide/，而我想要做的就是＆lt;导航＆gt;变得固定，我想要＆lt; ul＆gt;滑到右边。

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

Answer 1

当然可以......

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>

DEMO

Answer 2

2分我发现可能帮助：

从auto到固定值的转换可能是个问题。最后，您可以尝试将margin-left的{{1}}设置为默认值的固定值，而不仅仅是粘性时。

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

.main-nav-ul

Answer 3

CSS转换只需4个步骤

确保使用CSS过渡可以实现您想要做的事情。您可以通过checking the W3C docs。
将转换和起始样式添加到基本元素。
添加具有已更改样式的类或状态。
添加添加类的机制（如果适用）。

快速举例，假设您想要对:hover上的保证金更改进行动画处理。你只需这样做：

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

element:hover {
  margin-left: 0;
}

And here's a quick demo.

尝试在类更改上执行CSS转换

3 个答案:

CSS转换只需4个步骤