CSS3 - जावास्क्रिप्ट

Question

के माध्यम से मार्जिन छोड़ दिया संपत्ति एनिमेट इस proof of concept, यह मार्जिन-बाएं (दोनों नकारात्मक और सकारात्मक मान) चेतन करने के लिए संभव हो जाएगा जावास्क्रिप्ट के माध्यम से .. और तुम ऐसा करने के बारे में कैसे जाना होगा ध्यान में रखते?

नोट: मैं जानता हूँ कि इस वेबकिट-ही है। और मैं इसके साथ ठीक हूं, क्योंकि मैं आईओएस सफारी के लिए विकास कर रहा हूं।


अद्यतन

जवाब के लिए धन्यवाद, लेकिन jQuery के animate समारोह शुद्ध सीएसएस एनिमेशन, जो मैं क्या जरूरत है समर्थन नहीं करता।

Answer 1

मुझे पता है कि आप विशेष रूप से कहते हैं कि "आप जावास्क्रिप्ट में यह कर सकते हैं", लेकिन आप जावास्क्रिप्ट का उपयोग करने की जरूरत नहीं होनी चाहिए। मैं काफी हद तक निश्चित हूं कि आपके द्वारा लिंक की जाने वाली अवधारणा का प्रमाण केवल jQuery को जावास्क्रिप्ट पर वापस लाने के तरीके के रूप में उपयोग करता है ताकि सभी ब्राउज़र एनीमेशन के साथ अच्छा खेल सकें। चूंकि आप विशेष रूप से मोबाइल सफारी के लिए विकास कर रहे हैं, इसलिए ब्राउज़र के बैक बटन को काम करने के लिए पुश और पॉप स्टेटस के लिए इतिहास प्लगइन का उपयोग करने के अलावा आपको इसके लिए jQuery का उपयोग करने की आवश्यकता नहीं है; यह सीएसएस संक्रमण गुणों और :target छद्म चयनकर्ता के माध्यम से पूरी तरह से करने योग्य है। अपने टुकड़ा यूआरएल मिलान के रूप में जब तक

#thing-that-will-transition 
{ 
    (bunch of properties) 
    -webkit-transition: margin-left [the rest of your transition values] 
} 

#thing-that-will-transition:target 
{ 
    margin-left: [your properties] 
} 

:

HTML में:

<div id="thing-that-will-transition"> 
    <a href="#thing-that-will-transition>click this to transition the div</a> 
</div> 

सीएसएस में

तो एक विकल्प के रूप में, आप इस तरह कुछ करने के लिए सक्षम होना चाहिए तत्व है कि आप संक्रमण के लिए चाहते हैं उसका नाम के साथ तो आप अगर आप पेट जावास्क्रिप्ट का उपयोग यूआरएल के लिए में टुकड़ा पुश करने के लिए सक्षम होना चाहिए अंधेरे में एक टुकड़ा href के साथ एंकर का उपयोग करने के बजाय अभी भी संक्रमण हो रहा है। और यदि आप एक jQuery इतिहास प्लगइन का उपयोग करते हैं या इतिहास स्टैक के अपने स्वयं के धक्का और पॉपिंग करते हैं तो आपको अभी भी अपने ऐप के लिए बैक-बटन व्यवहार मिलता है।

मैं आप विशेष रूप से एक जावास्क्रिप्ट समाधान सीएसएस एनीमेशन को गति प्रदान करने के लिए कहा है, लेकिन मैं सिर्फ यकीन नहीं क्यों यह है कि तुम क्या जरूरत है हूँ। क्षमा करें अगर यह आपकी मदद नहीं करता है।


अद्यतन: Here's a jsFiddle demonstrating the above। यह इतिहास स्टैक को प्रबंधित करने के लिए this jQuery इतिहास प्लगइन का उपयोग करता है, ताकि आप अभी भी खंड URL से स्वीकार्य वापस/आगे बटन व्यवहार प्राप्त कर सकें।एंकर टैग जेएस सक्षम किए बिना ब्राउज़र के फॉलबैक के रूप में href विशेषता में मानक खंड के साथ ऑनक्लिक में प्लगइन की "पुश" या "लोड" विधि का उपयोग करता है।


अद्यतन 2:Here's another jsFiddle का उपयोग करता है रूपांतरण/बदलाव के बजाय अनुवाद।


अद्यतन 3 (roosteronacid से):

और एनिमेशन जावास्क्रिप्ट के माध्यम से जा प्राप्त करने के लिए के रूप में, आप कर सकते हैं:

var element = document.getElementById("..."); 

setTimeout(function() 
{ 
    element.style.webkitTransitionDuration = "0.3s"; 
    element.style.webkitTransitionTimingFunction = "ease-out"; 
    element.style.webkitTransform = "translate3d(300px, 0, 0)"; 
}, 0); 

Answer 2

आप jqueries उपयोग कर सकते हैं .animate() - http://jsfiddle.net/ajthomascouk/jS83H/ - - प्रेस + और -

मेरी उदाहरण चेक

Answer 3

Animating सीएसएस मार्जिन के साथ jQuery इस तरह काम करता है:

$('#mydiv').animate({ 

    'margin-left': 'new margin value' 

}); 

Answer 4

वेबकिट के सीएसएस का उपयोग करने के एनीमेशन, आप एक क्लास बनाते हैं जिसमें ट्रांसफॉर्म प्रॉपर्टी है, फिर आप जरूरी कक्षा को जोड़ने/निकालने के लिए jQuery का उपयोग कर सकते हैं।

Answer 5

बेहतर उपयोग संक्रमण, कि लगभग क्रॉस-ब्राउज़र (आईई को छोड़कर) का समर्थन किया है, और जे एस के माध्यम से मुख्य-फ़्रेम निर्धारित किया है।

Answer 6

आप css3 में एक संक्रमण है, और फिर बाद में सेट कर सकते हैं तत्व में परिवर्तन एनिमेटेड हो जाएगा।

.MY_CLASS { 
    -moz-transition: all 0.3s ease-out; /* FF4+ */ 
    -o-transition: all 0.3s ease-out; /* Opera 10.5+ */ 
    -webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */ 
    -ms-transition: all 0.3s ease-out; /* IE10 */ 
    transition: all 0.3s ease-out; 
} 

यह एक लगभग पार ब्राउज़र (लानत आईई) संक्रमण सभी सीएसएस परिवर्तन पर लागू होने वाला निर्दिष्ट करता है,, 0.3 सेकंड और आसान बनाता रहता है तो यह संक्रमण के अंत में धीमी हो जाएगी। इसलिए, बाईं ओर यह चेतन करने के लिए/सही, बस सीएसएस बदलने के लिए:

$(".MY_CLASS").css("margin-left", "-300px"); 

नोट इस, 300px की एक निश्चित स्थिति के लिए यह चेतन होगा यदि आप अपने वर्तमान स्थान उपयोग करने के लिए एक सापेक्ष स्थिति को चेतन करना चाहते हैं:

var mleft = $(".MY_CLASS").css("margin-left"); 
var newleft = mleft.substr(0, mleft.length-2) + 50; 
$('.MY_CLASS').css("margin-left", newleft+"px"); 

See a working example here (jsFiddle)

Answer 7

यह सीएसएस, HTML और केवल वेबकिट का उपयोग कर काम करता है:

#wrapper { 
    width: 700px; 
    text-align: left; 
    border-radius:10px; 
    -moz-border-radius:10px; 
    border-style:solid; 
    border-width:1px; 
    border-color:#ccc; 
    padding:30px 30px; 
    -moz-box-shadow: 0px 0px 5px #BBB; 
    -webkit-box-shadow: 0px 0px 5px #BBB; 
    box-shadow: 0px 0px 5px #BBB; 

    -webkit-transition-property: -webkit-transform, margin-left; 
    -webkit-transition-duration: 3s; 
    -webkit-transition-timing-function: ease-in; 
    -webkit-transform: translate(100px); 
} 

इसे देखने के लिए एक HTML फ़ाइल में बस <div id="wrapper">Placeholder text</div> बनाएं। Google क्रोम 12.0.742.112 और सफारी 5.0.5 (6533.21.1) में मेरे लिए काम किया। अगर यह तुरंत एनीमेशन नहीं करता है, तो हो सकता है कि यह आपके ब्राउज़र को अनुवाद को बहुत तेज़ी से संसाधित कर दे (या कैशिंग, शायद?)। आप किसी भी तरह देरी जोड़ने पर विचार कर सकते हैं। मैंने बस कुछ बार वास्तव में ताज़ा बटन दबाया। मेरे लिए काम किया

संपादित करें: girliemac's परीक्षण पृष्ठ के पीछे स्रोत देखें। वहाँ कुछ अंतर्दृष्टि सामान। यह भी देखें SO post।