फ्लेक्सबॉक्स औचित्य-सामग्री संपत्ति पर संक्रमण लागू करना

Question

मेरे पास एक सीएसएस क्लास है जो होवर पर justify-contentcenter से flex-start से 1s की देरी के साथ संपत्ति को बदलना चाहिए।

तो सबकुछ ठीक काम करता है और justify-content को छोड़कर देरी हो रही है।

.menuItem:hover { 
    transition-property: all; 
    transition-delay: 1s; 
    justify-content: flex-start; 
} 

क्या मैं कुछ गलत कर रहा हूं? और यदि हां, तो मैं उस व्यवहार को कैसे प्राप्त कर सकता हूं?

Answer 1

ठीक है, तो skreborn उल्लेख किया संरेखित-सामग्री पर, आप नहीं कर सकते उपयोग संक्रमण है, इसलिए मैं एनीमेशन के साथ की कोशिश की और यह काम करता है:

.menuItem:hover { 
    animation-name: change-content; 
    animation-delay: 1s; 
    animation-fill-mode: forwards; 
} 

@keyframes change-content { 
    from { justify-content: center; } 
    to { justify-content: flex-start; } 
} 

Answer 2

justify-content एक संक्रमण-सक्षम संपत्ति नहीं है। आप संगत गुणों की पूरी सूची here पा सकते हैं। सभी असूचीबद्ध गुणों को बस अपने नए मूल्य पर स्नैप करना चाहिए।

यदि आपको केवल एक तत्व को एनिमेट करने की आवश्यकता होती है, तो आप पूर्ण स्थिति का उपयोग करने का प्रयास कर सकते हैं।

#wrapper { 
    position: relative; 
} 

#element { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    transition: all 300ms; 
} 

#element:hover { 
    left: 0; 
    transform: translateX(0); 
} 

ध्यान रखें कि कई तत्वों के लिए यह नहीं कार्य नहीं करेगा।