CSS Transitions Twitter 的 Bootstrap 3

Question

我想为我的 css 添加过渡以实现流畅的响应操作，但似乎无法让它工作。谁能启发我？我需要覆盖某些东西吗？

    body{
    padding-top: 60px;
     transition:all .2s linear; 
    -o-transition:all .2s linear; 
    -moz-transition:all .2s linear; 
    -webkit-transition:all .2s linear;
}

Answer 1

从这里开始阅读:http://www.w3schools.com/css/css3_transitions.asp

CSS3 transitions are effects that let an element gradually change from one style to another.

因此您已经定义了样式更改。

The effect will start when the specified CSS property changes value. A typical CSS property >change would be when a user mouse-over an element:

通常使用 :hover 来触发更改。例如Triggering CSS3 Transform on browser resize向您展示，也可以使用媒体查询来触发样式更改。

所以首先定义效果、持续时间等:

body{
     padding-top: 0px;//begin state, you don't have to declare this cause 0px is default

     transition:padding-top 2s linear; 
    -o-transition:padding-top 2s linear; 
    -moz-transition:padding-top 2s linear; 
    -webkit-transition:padding-top 2s linear;
}

注意用 padding-top 替换所有。使用 all 将检查所有可能样式的更改，请参阅:http://msdn.microsoft.com/en-us/library/ie/dn254934(v=vs.85).aspx对于它们的列表，这会花费不必要的计算时间。

其次定义您的样式更改:

@media screen and (max-width: 767px){
    body{
          padding-top: 200px;
    }
}

参见:http://bootply.com/105331