尝试对类更改进行 CSS 转换

Trying to do a CSS Transition on a class change

提问by Constant Collide

Was wondering if there was a way to do a css transition when div is given a certain class. My best example is this site http://ideaware.co/

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

When you scroll down and the header becomes fixed, it does a background color change and has opacity. Really nice looking.

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

I am working on a template I have here http://www.niviholdings.com/collide/and what I want to do is when the < nav > becomes fixed, I want the < ul > to slide over to the right.

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

Hopefully I am explaining this correctly.

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

采纳答案by Linus Caldwell

2 points i found that mayhelp:

我发现 2 点可能有帮助：

Transitions from autoto a fixed value might be a problem. Eventually you could try setting the margin-leftof the .main-nav-ulto a fixed value per default, not only when it's sticky.

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

The second is (and this is hacky). Try to apply the class for your .main-nav-uldelayed:

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

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

回答by Turnip

Was wondering if there was a way to do a css transition when div is given a certain class.

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

Sure you can...

你当然可以...

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

演示

回答by Shauna

CSS Transitions in 4 easy steps

简单 4 步实现 CSS 转换

1. Make sure that what you want to do is possible with CSS transitions. You can do that by checking the W3C docs.

2. Add the transition, and your starting style, to your base element.

3. Add a class or state that has styles that have changed.

4. Add a mechanism to add the class (if applicable).

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

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

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

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

Quick example, let's say you want to animate a margin change on :hover. You'd just do this:

举个简单的例子，假设您想为 上的边距变化设置动画:hover。你只需这样做：

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

element:hover {
  margin-left: 0;
}

And here's a quick demo.

这是一个快速演示。