CSS寬度動畫不起作用

我嘗試了一切，但我不知道爲什麼這些動畫不起作用。有誰能夠幫助我？CSS寬度動畫不起作用

.link { 
 
    float:right; 
 
    clear:both; 
 
    padding:30px; 
 
    font-size:20px; 
 
    background-color: yellow; 
 
    color: #333; 
 
    font-family: Dosis; 
 
    font-weight: 700; 
 
    text-transform:uppercase; 
 
    text-decoration:none; 
 
    -webkit-transition: width 1s ease-in-out; 
 
    -moz-transition: width 1s ease-in-out; 
 
    -o-transition: width 1s ease-in-out; 
 
    transition: width 1s ease-in-out; 
 
    text-align:right; 
 
} 
 

 
.link:hover { 
 
    width:100%; 
 
    transition: width 2s; 
 
}

<div class="link">Something</div> 
 
<div class="link">about</div> 
 
<div class="link">you</div> 
 
<div class="link">makes</div> 
 
<div class="link">me</div>

等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等

來源

2017-06-18 gab

在這裏，你去....

.link { 
 
      float:right; 
 
      clear:both; 
 
      padding:30px; 
 
      font-size:20px; 
 
      width: 100px; 
 
      height: 100px; 
 
      color: #333; 
 
      font-family: Dosis; 
 
      font-weight: 700; 
 
      text-transform:uppercase; 
 
      text-decoration:none; 
 
      background: yellow; 
 
      -webkit-transition-property: width; /* Safari */ 
 
      -webkit-transition-duration: 2s; /* Safari */ 
 
      transition-property: width; 
 
      transition-duration: 2s; 
 
     } 
 

 
     .link:hover { 
 
      width: 100%; 
 
     }

<div class="link">Something</div> 
 
     <div class="link">about</div> 
 
     <div class="link">you</div> 
 
     <div class="link">makes</div> 
 
     <div class="link">me</div>

來源

2017-06-18 10:17:03

啊，但我想要的初始值是自動，這可能嗎？ – gab

你在說什麼價值 –

也許它過於複雜，但它似乎工作:)

$(document).ready(function() { 
 
    $('.link').each(function() { 
 
    var value = $(this).width(); 
 
    $(this).css({"width":value}); 
 
    $(this).hover(function(){ 
 
    $(this).css({"width":"100%"}); 
 
    },function(){ 
 
    $(this).css({"width":value}); 
 
    }) 
 
    }) 
 
});

.link { 
 
    width: auto; 
 
    float:right; 
 
    clear:both; 
 
    padding:30px; 
 
    font-size:20px; 
 
    background-color: yellow; 
 
    color: #333; 
 
    font-family: Dosis; 
 
    font-weight: 700; 
 
    text-transform:uppercase; 
 
    text-decoration:none; 
 
    -webkit-transition: width 1s ease-in-out; 
 
    -moz-transition: width 1s ease-in-out; 
 
    -o-transition: width 1s ease-in-out; 
 
    transition: width 1s ease-in-out; 
 
    text-align:right; 
 
} 
 

 
.link:hover { 
 
    width:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="link">Something</div> 
 
<div class="link">about</div> 
 
     <div class="link">you</div> 
 
     <div class="link">makes</div> 
 
     <div class="link">me</div>

來源

2017-06-18 10:18:02

我怎麼沒有設定初始值？ – gab

我不確定是否可能沒有一點javascript，因爲根據轉換描述，CSS3轉換允許您在給定的持續時間內平穩地（從一個值到另一個值）更改屬性值。「 –

好的，謝謝:) – gab

你可以過渡最小寬度，而不是寬度。你只能從一個值轉換到另一個值，這就是爲什麼在「auto」和「100％」之間轉換不起作用的原因。

.link { 
 
    float:right; 
 
    clear:both; 
 
    padding:30px; 
 
    font-size:20px; 
 
    background-color: yellow; 
 
    color: #333; 
 
    font-family: Dosis; 
 
    font-weight: 700; 
 
    text-transform:uppercase; 
 
    text-decoration:none; 
 
    -webkit-transition: min-width 1s ease-in-out; 
 
    -moz-transition: min-width 1s ease-in-out; 
 
    -o-transition: min-width 1s ease-in-out; 
 
    transition: min-width 1s ease-in-out; 
 
    text-align:right; 
 
    min-width:0; 
 
} 
 

 
.link:hover { 
 
    min-width:100%; 
 
    -webkit-transition: min-width 1s ease-in-out; 
 
    -moz-transition: min-width 1s ease-in-out; 
 
    -o-transition: min-width 1s ease-in-out; 
 
    transition: min-width 1s ease-in-out; 
 
}

<div class="link">Something</div> 
 
<div class="link">about</div> 
 
<div class="link">you</div> 
 
<div class="link">makes</div> 
 
<div class="link">me</div>

來源

2017-06-18 11:23:37 WizardCoder

CSS寬度動畫不起作用

回答

相關問題