2015-08-27 22 views
10

के बाद मैं निम्नलिखित सीएसएस नियम है:एनिमेट करें: मंडराना:

button:hover:after { 
    content: ' ' attr(title); 
} 

मूल रूप से बटन सामग्री और एक शीर्षक विशेषता के रूप में एक FontAwesome चिह्न है। जब आप बटन पर होवर करते हैं, तो यह एक स्थान और फिर बटन की सामग्री में शीर्षक जोड़ देगा। this JSFiddle

अब प्रश्न, मैं इसे कैसे एनिमेट करूँगा? मैं चाहता हूं कि बटन की नई चौड़ाई एनिमेटेड हो ताकि यह स्थिर और बदसूरत दिखाई न दे।

उत्तर

2

मैं एक समाधान है, जो काम करता है मिल गया लेकिन नहीं सबसे अच्छा फैशन

button:after { 
    content:' ' attr(title); 
    visibility: hidden; 
    opacity:0; 
    transition: visibility 0s linear 0.5s, opacity 0.5s linear, font 0.05s linear; 
    font-size: 0; 
} 
button:hover:after { 
    content:' ' attr(title); 
    visibility: visible; 
    opacity:1; 
    transition-delay:0s; 
    font-size: 13px; 
} 

See working JSFiddle here

पृष्ठभूमि

आपका दृष्टिकोण प्रदर्शन संपत्ति का उपयोग करने के अनुरूप है हो सकता है। इसलिए क्रेडिट प्रारंभिक :after राज्य में 0 पर font-size कम करने के लिए अपने छोटे से हैक के साथ इस Transitions on the display: property करने के लिए जाना

अद्यतन

यहां तक ​​कि चिकनी संक्रमण:

button:after { 
    content: ' ' attr(title); 
    font-size: 0; 
    opacity: 0; 
    transition: opacity 0.2s 0s ease, font-size 0.2s 0.2s ease; 
} 

button:hover:after { 
    font-size: inherit; 
    opacity: 1; 
    transition: font-size 0.2s 0s ease, opacity 0.2s 0.2s ease; 
} 

देखें JSFiddle

+1

'पर transition' की स्थापना': hover' व्यर्थ है – haim770

+0

तुम भी बटन की चौड़ाई के लिए एक संक्रमण जोड़ना चाहिए, और यह बेहतर :-) –

+0

सही दिखाई देगा, दोनों बेला और कोड अद्यतन – gco

2

यह इस तरह काम कर सकता है, लेकिन इस समाधान के लिए, आपको अपने बटन पर निश्चित चौड़ाई रखना होगा।

button:hover:after { 
    content: ' ' attr(title); 
} 

button:hover{ 
    width:70px; 
} 

button{ 
    width:20px; 
    overflow:hidden; 
    white-space:nowrap; 
    -webkit-transition:0.5s; 
    -moz-transition:0.5s; 
    -ms-transition:0.5s; 
    -o-transition:0.5s; 
    transition:0.5s; 
} 

http://jsfiddle.net/j3zw1thh/1/

+0

मैं इसके बारे में भी सोच रहा था, लेकिन हो सकता है कि आप पहले बटन के आकार को नहीं जानते। यह स्ट्रिंग पर निर्भर करता है। तो आपको इसकी गणना करने के लिए जावास्क्रिप्ट की आवश्यकता होगी। वास्तव में – gco

+0

। यह फिट नहीं है क्योंकि मेरे पास अलग-अलग चौड़ाई वाले बहुत सारे बटन हैं। –

संबंधित मुद्दे