सीएसएस एनीमेशन - मूल स्थान की स्थिति

Question

मैं आज सीएसएस एनीमेशन के साथ खेलना चाहता था।

तो मेरा मूल विचार चार सर्कल बनाना था, जब उपयोगकर्ता उस सर्कल पर क्लिक करता है तो उसे पृष्ठ के केंद्र में जाना चाहिए और फिर यह अन्य आकार बनना चाहिए।

तो मैंने उपयोग, परिवर्तन और एनीमेशन गुणों का उपयोग किया है।

यह कोड है जो मैंने अभी तक लिखा है।

$(".circle").click(function(){ 
 
    if($(this).hasClass('centerOfPage')){ 
 
    $(this).removeClass('centerOfPage'); 
 
    }else{ 
 
    $(this).addClass('centerOfPage'); 
 
    } 
 
});

.circle{ 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
    margin: 10px; 
 
} 
 
.one{ 
 
    background-color: red; 
 
} 
 
.two{ 
 
    background-color: blue; 
 
} 
 
.three{ 
 
    background-color: yellow; 
 
} 
 
.four{ 
 
    background-color: green; 
 
} 
 

 
.centerOfPage{ 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 5%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    animation : centerOfPageAnimate 3s; 
 
    
 
} 
 
@keyframes centerOfPageAnimate { 
 
    0% { 
 
    top: 0%; 
 
    left: 0%; 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
    transform: translate(0, 0);  
 
    } 
 
    100% { 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 5%; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="circle one"></div> 
 
    <div class="circle two"></div> 
 
    <div class="circle three"></div> 
 
    <div class="circle four"></div> 
 
</div>

अब यहाँ कुछ समस्याओं .. जो आप देखेंगे हैं

• आप किसी भी हलकों पर क्लिक करते हैं तो उनके एनीमेशन कि वे कहाँ हैं से नहीं शीर्ष कोने से शुरू कर देंगे ।
• जब आप फिर से div पर क्लिक करते हैं तो वे अपनी स्थिति पर वापस जा रहे हैं लेकिन यह एनिमेटेड नहीं है, फिर मैं चाहता हूं कि एनीमेशन अन्य आकार से सर्कल तक और उसी स्थिति में हो।

यहां codepen है। धन्यवाद।

Answer 1

चूंकि आप पहले ही jQuery का उपयोग कर रहे हैं, मैंने इसे 100% उपयोग करने का निर्णय लिया है। मेरे कोड और आपके बीच का मुख्य अंतर यह है कि मैं लोड पर प्रत्येक मंडल की स्थिति संग्रहीत करता हूं और मैं CSS3 कीफ्रेम पर भरोसा नहीं करता हूं।

मैं jQuery .डेटा विधि का उपयोग करके सर्कल की स्थिति लोड पर संग्रहीत करता हूं। अब जब आप 'centerOfPage' कक्षा को हटाते हैं तो आप jQuery का उपयोग करके पहले संग्रहीत स्थिति को वापस ले जा सकते हैं।

देखें jQuery स्निपेट और Codepen

$('.circle').each(function() { 
 
    $(this).data('circlePosTop', $(this).position().top); 
 
}); 
 
\t \t 
 
$(".circle").click(function(){ 
 
if($(this).hasClass('centerOfPage')){ 
 
    $(this).animate({top:$(this).data('circlePosTop'),left:0,borderRadius:'50%',height:'100px',width:'100px'}).removeClass('centerOfPage'); 
 
} else { 
 
    $(this).addClass('centerOfPage').animate({top:0,left:0,borderRadius:'5%',height:'100%',width:'100%'}); 
 
} 
 
});

http://codepen.io/anon/pen/OyWVyP

Answer 2

@nitz JQuery बेहद भारी है और यह दृश्य परिवर्तन के इस प्रकार के लिए संभव के रूप में छोटे रूप में इस्तेमाल किया जाना चाहिए। आप यह सही कर रहे हैं।

आपको एनीमेशन को कीफ्रेम से निकालना होगा, यह अधिक जटिल है।

इस प्रयास करें:

$(".circle").click(function(){ 
 
    $(this).toggleClass("centerOfPage"); 
 
});

.circle{ 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
    position: fixed; 
 
    left: 30px; 
 
    
 
    -moz-transition: all 0.5s ease .2s; 
 
    -o-transition: all 0.5s ease .2s; 
 
    -webkit-transition: all 0.5s ease .2s; 
 
    transition: all 0.5s ease .2s; 
 
} 
 
.one{ 
 
    background-color: red; 
 
    top: 10px; 
 
} 
 
.two{ 
 
    background-color: blue; 
 
    top: 120px; 
 
} 
 
.three{ 
 
    background-color: yellow; 
 
    top: 230px; 
 
} 
 
.four{ 
 
    background-color: green; 
 
    top: 340px; 
 
} 
 

 
.centerOfPage{ 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; bottom: 0; 
 
    left: 0; right: 0; 
 
    border-radius: 0; 
 
    z-index: 2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="circle one"></div> 
 
    <div class="circle two"></div> 
 
    <div class="circle three"></div> 
 
    <div class="circle four"></div> 
 
</div>

Answer 3

इस शायद है कि आप क्या ढूंढ रहे हैं?

केंद्रऑफपेज क्लास अब एनीमेशन शुरू करने के लिए है, कोई अतिरिक्त स्थिति नहीं है, और कीफ्रेम घोषणा में% का उपयोग करके हम इसे पहले पृष्ठ के केंद्र में ले जा सकते हैं और फिर इसे बड़ा बना सकते हैं (आप चरणों के भीतर भी जोड़ सकते हैं यदि आप चाहते हैं)

$(".circle").click(function(){ 
 
    $(this).toggleClass('centerOfPage'); //toggleClass saves you the if else 
 
});

.circle{ 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
    margin: 10px; 
 
    transition: all 2s linear; /* added transition to animate going back to start state*/ 
 
} 
 
.one{ 
 
    background-color: red; 
 
    
 
} 
 
.two{ 
 
    background-color: blue; 
 
} 
 
.three{ 
 
    background-color: yellow; 
 
} 
 
.four{ 
 
    background-color: green; 
 
} 
 

 
.centerOfPage{ 
 
    
 
    animation: test 2s forwards; /* add "forwards" here to stop the animation at end-frame */ 
 
    } 
 

 

 
    @keyframes test{ 
 
    /* You can use percent to target steps during your animation: 
 
     here it moves to the center at 10% animation duration and gets bigger at 100 % animation duration 
 
    */ 
 
    10%{ 
 
    transform: translate(50%); 
 
    } 
 
    100%{ 
 
    width: 100vw; 
 
    height: 100vh; 
 
    border-radius: 5%; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="circle one"></div> 
 
    <div class="circle two"></div> 
 
    <div class="circle three"></div> 
 
    <div class="circle four"></div> 
 
</div>

बेशक यह "वे कहाँ हैं से शुरू" नहीं करता है के