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

Question

想知道在给某个班级时,是否有办法进行css过渡.我最好的例子是这个网站http://ideaware.co/

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

我正在制作一个模板,我在这里http://www.niviholdings.com/collide/,我想要做的是当<nav>修复后,我希望<ul>向右滑动.

希望我正确解释这一点.

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的.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;
}

这是一个快速演示.