Cố gắng thực hiện chuyển đổi CSS trên một thay đổi lớp học

Question

Đã tự hỏi liệu có cách nào để thực hiện chuyển tiếp css khi div được cấp một lớp nhất định hay không. Ví dụ tốt nhất của tôi là trang web này http://ideaware.co/

Khi bạn cuộn xuống và tiêu đề trở nên cố định, màu nền sẽ thay đổi và có độ mờ. Thực sự đẹp trai.

Tôi đang làm việc trên mẫu tôi có ở đây http://www.niviholdings.com/collide/ và điều tôi muốn làm là khi điều hướng < trở thành cố định, tôi muốn < ul> trượt sang phải.

Hy vọng rằng tôi đang giải thích điều này một cách chính xác.

Answer 1

2 điểm tôi thấy rằng thể giúp đỡ:

Chuyển tiếp từ auto đến một giá trị cố định có thể là một vấn đề. Cuối cùng, bạn có thể thử đặt margin-left của .main-nav-ul thành giá trị cố định theo mặc định, không chỉ khi nó dính.

Thứ hai là (và điều này là hacky). Hãy cố gắng áp dụng lớp học cho số .main-nav-ul bị trễ của bạn:

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

Answer 2

Transitions CSS trong 4 bước đơn giản

1. Hãy chắc chắn rằng những gì bạn muốn làm là có thể với hiệu ứng chuyển tiếp CSS. Bạn có thể làm điều đó bằng cách checking the W3C docs.

2. Thêm chuyển tiếp và kiểu bắt đầu của bạn vào phần tử cơ sở.

3. Thêm lớp hoặc trạng thái có kiểu đã thay đổi.

4. Thêm cơ chế để thêm lớp học (nếu có).

Ví dụ nhanh, giả sử bạn muốn tạo hiệu ứng thay đổi ký quỹ trên :hover. Bạn sẽ chỉ làm điều này:

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

element:hover { 
    margin-left: 0; 
} 

And here's a quick demo.

Answer 3

Chắc chắn bạn có thể ...

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

#someElement.someClass { 
    background: green; 
    left: 50px; 
} 

DEMO