text.html

<h1 id="nav_point_305">第19章　CSS过渡</h1> 
<p class="zw">在网页和APP中，状态的变化会对用户使用界面的感受产生很大的影响。如果变化太快，交互会显得很不自然；如果变化太慢，哪怕只有几毫秒，界面就会显得有些呆板和生硬。</p> 
<p class="zw">当我们将一个链接改成按钮形式时，我们往往会通过改变它的背景色来改变鼠标悬停状态时的外观。</p> 
<pre class="代码无行号"><code>.btn { 
background-color : #bc676c; } 

.btn:hover { 
background-color : #a7494f; }</code></pre> 
<p class="zw">默认情况下，这些样式变化是即时的，但通过使用CSS过渡，我们可以让变化在特定的时间长度内发生，并可以控制变化的速度和延迟。</p> 
<pre class="代码无行号"><code>.btn { 
transition-property : background-color; }</code></pre> 
<p class="zw">我们可以通过动态伪类选择器来触发CSS过渡，例如<code>:hover</code>、<code>:focus</code>、 <code>:active</code> 和 <code>:target</code>。首先，要确认哪个或哪些属性需要过渡。在我们这个按钮上，只需要过渡它的背景色，因此我们这样来使用<code>transition-property</code>。</p> 
<pre class="代码无行号"><code>.btn { 
transition-property : background-color; 
transition-duration : .25s; }</code></pre> 
<blockquote class="提示 editing-block"> 
 <h3 class="sigil_not_in_toc">过渡持续时间</h3> 
 <p class="zw">过渡属性可以在任意几秒（<code>s</code>）或毫秒（<code>ms</code>）内改变一个或多个样式。到目前为止，这些时间单位只被用于听觉样式表中。如果需要在四分之一秒（<code>.25s</code>）内完成平滑的过渡，我们为过渡添加0.25秒（<code>.25s</code>）的持续时间。</p> 
 <pre class="代码无行号"><code>.btn { transition-duration : .25s; }</code></pre> 
 <p class="zw">如果把持续时间设置为<code>0</code>，或者忽略了这个属性，那么状态将会立刻发生改变，不会有任何过渡。</p> 
</blockquote> 
<p class="zw">注意我们是如何把过渡声明添加到要过渡的元素上，而不是元素的其他状态例如<code>:hover</code>状态上。</p> 
<pre class="代码无行号"><code>.btn { 
transition-property : #a7494f; }</code></pre> 
<p class="zw">通过此处的声明，按钮的背景色将会在四分之一秒（<code>.25s</code>）的时间内平滑地在红色的两种色调之间过渡。</p> 
<p class="zw">我们可以把过渡应用到任何块级或文本元素，以及<code>:before</code>和<code>:after</code>等伪元素上。</p> 
<h3 class="sigil_not_in_toc" id="nav_point_306">组合过渡</h3> 
<p class="zw">当我们有两个或多个属性需要过渡——例如，背景色和文本颜色——那么可以将每个属性用逗号分隔。</p> 
<pre class="代码无行号"><code>.btn { 
background-color : #bc676c; 
color : #fff; 
transition-property : background-color, color; }</code></pre> 
<p class="zw">或者，我们可以利用<code>all</code>关键字把多个属性组合到一个声明中。</p> 
<pre class="代码无行号"><code>.btn { 
transition-property : all; }</code></pre> 
<h3 class="sigil_not_in_toc" id="nav_point_307">延迟过渡</h3> 
<p class="zw">在现实世界中，我们与之交互的许多对象并不是在按下按钮或触发时立即开始变化。默认情况下，CSS过渡从它们启动的那一刻开始，我们称之为零点。我们可以通过在零点和过渡开始之间增加延迟来实现物理真实感。指定若干毫秒（ms）或若干秒（s）的延迟时间。</p> 
<pre class="代码无行号"><code>.btn { 
transition-property : background-color; 
transition-duration : .25s; 
transition-delay : .1s; }</code></pre> 
<p class="zw">从零点到背景颜色变化开始之间，我们只添加0.1秒（<code>.1s</code>）的延迟，当属性返回到原始状态时也会应用同样的延迟。</p> 
<h3 class="sigil_not_in_toc" id="nav_point_308">加速过渡</h3> 
<p class="zw">加速取决于我们选择的<code>transition-timing-function</code>属性值。例如，线性过渡<code>linear</code>将会在整个过渡过程中保持恒定速度，而<code>ease</code>过渡将会在样式变化过程中逐渐减慢。另外还有三个关键字可以进一步变化过渡的速度，如下所示。</p> 
<table border="1" width="90%"> 
 <tbody>
  <tr> 
   <td><code>ease-in</code></td> 
   <td>开始缓慢，并逐渐加速</td> 
  </tr> 
  <tr> 
   <td><code>ease-out</code></td> 
   <td>开始较快，并逐渐减速</td> 
  </tr> 
  <tr> 
   <td><code>ease-in-out</code></td> 
   <td>慢速开始，然后变快，慢速结束</td> 
  </tr> 
 </tbody>
</table> 
<p class="zw">我们在按钮上指定一个线性<code>linear</code>过渡。</p> 
<pre class="代码无行号"><code>.btn { 
transition-property : background-color; 
transition-duration : .25s; 
transition-delay : .1s; 
transition-timing-function : linear; }</code></pre> 
<p class="zw">W3C的CSS3过渡模块还包括沿一个自定义的贝塞尔曲线绘制<code>transition-timing-function</code>的能力。用数学方法来定时是很有趣的，但超出了本书的介绍范围。</p> 
<h3 class="sigil_not_in_toc" id="nav_point_309">应用多个过渡</h3> 
<p class="zw">当需要过渡两个或多个属性的时候，我们可以将它们组合成一个由逗号分隔的列表，然后分别为每一个指定持续时间、延时和时间函数的值。首先，我们把多个过渡用常规的方式写出来。</p> 
<pre class="代码无行号"><code>.btn { 
transition-property : background-color, color; 
transition-duration : .25s, .25s; 
transition-delay : .1s, .1s; 
transition-timing-function : linear, linear; }</code></pre> 
<p class="zw">多个过渡的持续时间、延迟或时间函数值是相同的，那么我们只需要把这些值写一次。</p> 
<pre class="代码无行号"><code>.btn { 
transition-property : background-color, color; 
transition-duration : .25s; 
transition-delay : .1s; 
transition-timing-function : linear; }</code></pre> 
<p class="zw">我们也可以把这些值组合成一个由逗号分隔的字符串。</p> 
<pre class="代码无行号"><code>.btn { 
transition : background-color .25s .1s linear, color .25s .1s  
linear; }</code></pre> 
<p class="zw">当我们需要几个过渡按次序来执行时，可以为每个过渡指定不同的延迟时间。</p>