CSS3アニメーションカスタム幅ボタン

私たちのタスクは、HTMLとCSSのみでユニバーサルボタンを作成することでした。ユニバーサルボタンは幅が固定サイズではなく、デフォルトの状態ではアイコンのみを表示します。







ここにあるように見える-明白で簡単な解決策：

.button { transition: width ease-out 0.2s; width: 32px; } .button:hover { transition: width ease-out 0.2s; width: auto; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ただし、この場合のCSS移行は機能しません。



以前に彼らが私のところに来て、「CSS3でこれを行うことは可能ですか？」と尋ねたとき、私はデザイナーとマネージャーを失望させ、cssプロパティの一種の不完全な移行を非難しました。



それでも、抜け穴が1つあることがわかりました。



width



代わりにwidth



max-width



する必要があります：

 .button { transition: width ease-out 0.2s; max-width: 32px; } .button:hover { transition: width ease-out 0.2s; max-width: 300px; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

height



「遊び回る」必要があるときも同じ話が当てはまります。



デモとソースコードは、htmlおよびcssタブにあります。



ご清聴ありがとうございました！