चेतन तत्त्व रूपांतर घूमता है

Question

मैं एक jQuery के साथ एक तत्व को कैसे घुमाऊंगा .animate()? मैं नीचे दी गई लाइन का उपयोग कर रहा हूं, जो वर्तमान में अस्पष्टता को सही ढंग से एनिमेट कर रही है, लेकिन क्या यह सीएसएस 3 ट्रांसफॉर्म को सपोर्ट करता है?

$(element).animate({
   opacity: 0.25,
   MozTransform: 'rotate(-' + -amount + 'deg)',
   transform: 'rotate(' + -amount + 'deg)'
});

Comments

एक jQuery प्लगइन है जो CSS को बदल देगा। फ़ायरफ़ॉक्स, क्रोम, सफारी, ओपेरा और इंटरनेट एक्सप्लोरर में काम करता है। github.com/puppybits/QTransform

— पिल्ला

एक ही विषय के साथ एक खोज में यहां समाप्त हुआ, और प्लगइन को डाउनलाड किया; ठीक काम करता है, लेकिन इससे मेरे द्वारा बनाए गए एक अन्य प्लगइन में इस निर्देश के साथ संघर्ष हुआ: $ ("#" + self.id) .css ("रूपांतर", "स्केल (1)"); मैंने इस पंक्ति को बदल दिया: elem.style [$। CssProps.transform] = val + '%'; इसके लिए: if (isNaN (val)) elem.style [$। cssProps.transform] = val; और एल.एम.स्टाइल [$। cssProps.transform] = val + '%'; लगता है कि यह और स्पष्टीकरण की जरूरत नहीं है।

— सर्जियो ०

Answer 1

जहां तक ​​मुझे पता है, बेसिक एनिमेट नॉन-न्यूमेरिक सीएसएस प्रॉपर्टीज को एनिमेट नहीं कर सकते।

मेरा मानना ​​है कि आप इसे एक चरण फ़ंक्शन और उपयोगकर्ताओं के ब्राउज़र के लिए उपयुक्त css3 परिवर्तन का उपयोग करके प्राप्त कर सकते हैं । CSS3 का रूपांतरण आपके सभी ब्राउज़रों को कवर करने के लिए थोड़ा मुश्किल है (उदाहरण के लिए आपको IE6 को मैट्रिक्स फ़िल्टर का उपयोग करने की आवश्यकता है)।

EDIT : यहां एक उदाहरण दिया गया है जो वेबकिट ब्राउज़र (क्रोम, सफारी) में काम करता है: http://jsfiddle.net/ryleyb/ERRmd/

यदि आप केवल IE9 का समर्थन करना चाहते हैं, तो आप transformइसके बजाय उपयोग कर सकते हैं -webkit-transform, या -moz-transformफ़ायरफ़ॉक्स का समर्थन करेंगे।

इस्तेमाल की गई चाल एक सीएसएस संपत्ति को चेतन करने के लिए है जिसकी हमें परवाह नहीं है ( text-indent) और फिर रोटेशन करने के लिए एक चरण फ़ंक्शन में इसके मूल्य का उपयोग करें:

$('#foo').animate(
..
step: function(now,fx) {
  $(this).css('-webkit-transform','rotate('+now+'deg)'); 
}
...

Comments

यह कोड रखरखाव और गति दोनों के बारे में एक दर्दनाक समाधान है। भूल जाओ jQuery, जबकि transforming, मेरे समाधान की जाँच करें।

— डाईन

क्या होगा यदि आपके पास मूल्य है जो घूमने के लिए हर समय बदलता है, एक निश्चित नहीं है?

— edonbajrami

Answer 2

रेली का जवाब बहुत अच्छा है, लेकिन मेरे पास तत्व के भीतर पाठ है। पाठ को सब कुछ के साथ घुमाने के लिए, मैंने पाठ-इंडेंट के बजाय सीमा-रिक्ति संपत्ति का उपयोग किया।

तत्व की शैली में थोड़ा स्पष्ट करने के लिए, अपना प्रारंभिक मूल्य निर्धारित करें:

#foo {
    border-spacing: 0px;
}

फिर चेतन में, अपने अंतिम मूल्य:

$('#foo').animate({  borderSpacing: -90 }, {
    step: function(now,fx) {
      $(this).css('transform','rotate('+now+'deg)');  
    },
    duration:'slow'
},'linear');

मेरे मामले में, यह 90 डिग्री प्रतिघंटे पर घूमता है।

यहाँ लाइव डेमो है ।

Comments

अगर आप इसे कहीं और इस्तेमाल नहीं कर रहे हैं तो z- इंडेक्स का उपयोग करना भी एक अच्छा विकल्प है। लेकिन आप उस एक पर नकारात्मक नहीं जाना चाहेंगे।

— शेरजोद

आप चाहें तो -ms- और -ओ- एक्सटेंशन भी जोड़ सकते हैं (देखें css3please.com )

— जोराम वैन डेन बोएजेम

आप एक ही समय में अतिरिक्त गुणों को कैसे चेतन कर सकते हैं?

— मादुरकी

@ मादुरकी, मैंने आपके प्रश्न का उत्तर नीचे लिखा है!

— मर्ग

jQuery वास्तव में आप के लिए -moz-, -webkit-, आदि सब जोड़ने के लिए पर्याप्त स्मार्ट है, इसलिए आप इस कोड को थोड़ा सरल कर सकते हैं। बहुत अच्छा जवाब। +1

— ऑक्टोपस

Answer 3

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

आपको बस addClassउस तत्व का उपयोग करना है, जिसे आप चेतन करने के लिए उपयोग करना चाहते हैं, जहाँ आप एक वर्ग सेट करते हैं जिसमें CSS transitionगुण हैं। आप बस एनीमेशन को "सक्रिय" करते हैं , जो शुद्ध प्रस्तुति परत पर लागू होता है ।

.js

// with jQuery
$("#element").addClass("Animate");

// without jQuery library
document.getElementById("element").className += "Animate";

कोई आसानी से jQuery के साथ एक वर्ग को हटा सकता है , या पुस्तकालय के बिना एक वर्ग को हटा सकता है ।

सीएसएस

#element{
    color      : white;
}

#element.Animate{
    transition        : .4s linear;
    color             : red;
    /** 
     * Not that ugly as the JavaScript approach.
     * Easy to maintain, the most portable solution.
     */
    -webkit-transform : rotate(90deg);
}

.html

<span id="element">
    Text
</span>

यह ज्यादातर उपयोग के मामलों के लिए एक तेज और सुविधाजनक समाधान है।

मैं इसका उपयोग तब भी करता हूं जब मैं एक अलग स्टाइलिंग (वैकल्पिक सीएसएस गुण) को लागू करना चाहता हूं, और वैश्विक .5s एनीमेशन के साथ ऑन-द-फ्लाई को बदलने की इच्छा रखता हूं। मैं BODYइस तरह के रूप में वैकल्पिक सीएसएस होने के दौरान, एक नया वर्ग जोड़ता हूं :

.js

$("BODY").addClass("Alternative");

सीएसएस

BODY.Alternative #element{
    color      : blue;
    transition : .5s linear;
}

इस तरह आप अलग-अलग CSS फाइलों को लोड किए बिना, एनिमेशन के साथ अलग स्टाइल लागू कर सकते हैं। आप केवल एक सेट करने के लिए जावास्क्रिप्ट को शामिल करते हैं class।

Comments

यह ठीक है, लेकिन यह उन ब्राउज़रों तक सीमित है जो CSS3 के संक्रमण का समर्थन करते हैं । तो, कोई IE8 या IE9 नहीं। यह एक बहुत बड़ा सेगमेंट है।

— रेली

@Ryley आप उपयोगकर्ताओं के 12% प्रतिशत के बारे में बात कर रहे हैं । IE8 या IE9 उपयोगकर्ता 5% से कम हैं। यह एक बहुत बड़ा सेगमेंट नहीं है, क्योंकि हम अभी भी प्रेजेंटेशन लेयर की बात कर रहे हैं और कार्यक्षमता की नहीं। आपके लगभग 5% आगंतुक आपके 3 डी एनिमेशन नहीं देखेंगे। इसके अलावा यदि कोई ब्राउज़र (IE) समर्थन नहीं करता है transition, तो यह निश्चित रूप से आपके परिवर्तनों का समर्थन नहीं करेगा।

— डायिन

यह पूरी तरह सच नहीं है - transformIE9 द्वारा समर्थित है। लेकिन मैं मानता हूं कि यह (IE8) को छोड़ना सबसे बड़ा उपयोगकर्ता समूह नहीं है।

— हेले

@ डीन यह फ्लैट 12% नहीं है, यह आपके लक्ष्य जनसांख्यिकीय पर निर्भर करता है। मेरी फर्म के 50% उपयोगकर्ता google-analytics के अनुसार IE8 पर हैं। अपने दर्शकों को जानना महत्वपूर्ण है। कहा जा रहा है: ब्रावो दोस्त! यह उत्तर शीर्ष दो की तुलना में बहुत बेहतर है। "किसी न किसी में हीरा" होने का रास्ता।

— जिग्गी

यह गतिशील रोटेशन मूल्यों के लिए भी जिम्मेदार नहीं है।

— युस्किक

Answer 4

Ryley और atonyc का उत्तर देने के लिए जोड़ने के लिए, आप वास्तव में की तरह, एक असली सीएसएस संपत्ति का उपयोग करने की जरूरत नहीं है text-indexया border-spacingकिया, लेकिन आप की तरह, एक नकली सीएसएस संपत्ति निर्दिष्ट कर सकते हैं rotationया my-awesome-property। भविष्य में वास्तविक CSS संपत्ति बनने का जोखिम न उठाने वाली किसी चीज़ का उपयोग करना एक अच्छा विचार हो सकता है।

इसके अलावा, किसी ने पूछा कि एक ही समय में अन्य चीजों को कैसे चेतन करना है। यह हमेशा की तरह किया जा सकता है, लेकिन याद रखें कि stepफ़ंक्शन को प्रत्येक एनिमेटेड संपत्ति के लिए कहा जाता है, इसलिए आपको अपनी संपत्ति की जांच करनी होगी, जैसे:

$('#foo').animate(
    {
        opacity: 0.5,
        width: "100px",
        height: "100px",
        myRotationProperty: 45
    },
    {
        step: function(now, tween) {
            if (tween.prop === "myRotationProperty") {
                $(this).css('-webkit-transform','rotate('+now+'deg)');
                $(this).css('-moz-transform','rotate('+now+'deg)'); 
                // add Opera, MS etc. variants
                $(this).css('transform','rotate('+now+'deg)');  
            }
        }
    });

(नोट: मैं jQuery के दस्तावेज़ में "Tween" ऑब्जेक्ट के लिए दस्तावेज़ नहीं ढूँढ सकता , चेतन प्रलेखन पृष्ठ से http://api.jquery.com/Types#Tween के लिए एक लिंक है जो doesn एक अनुभाग है 't प्रतीत होता है। आप यहाँ Github पर Tween प्रोटोटाइप के लिए कोड पा सकते हैं )।

Comments

MyRotationProperty क्या है ... क्या यह कुछ कस्टम है जिसे आपने परिभाषित किया है; और nowइस पर निर्भर करता है।

— मुहम्मद उमर

@MuhammadUmer - हाँ, myRotationPropertyकुछ कस्टम, एक बना-बनाया, "नकली" सीएसएस संपत्ति है। nowइस कदम पर संपत्ति के मूल्य में परिवर्तन को निर्दिष्ट करते हुए, कदम कॉलबैक फ़ंक्शन का पहला तर्क है।

— स्केडल सेप 22'14

फिर क्या आपने इस गुण को भी css में इनिशियलाइज़ किया या आप बस इसे चेतन कर सकते हैं यह शून्य लेता है।

— मुहम्मद उमर

Answer 5

बस सीएसएस बदलाव का उपयोग करें:

$(element).css( { transition: "transform 0.5s",
                  transform:  "rotate(" + amount + "deg)" } );

setTimeout( function() { $(element).css( { transition: "none" } ) }, 500 );

उदाहरण के तौर पर मैंने एनिमेशन की अवधि 0.5 सेकंड निर्धारित की है।

एनीमेशन समाप्त होने के बाद सीएसएस संपत्ति setTimeoutको हटाने के लिए ध्यान दें transition(500 एमएस)

---

पठनीयता के लिए मैंने विक्रेता उपसर्गों को छोड़ दिया।

इस समाधान के लिए ब्राउज़र के संक्रमण समर्थन की आवश्यकता होती है।

Comments

धन्यवाद, मेरे लिए काम किया। आप अपने करीबी माता-पिता के पीछे एक अर्धविराम भी भूल गए।

— डेविन कारपेंटर

@ Sorrow123444 मुझे खुशी है कि इसने आपके लिए काम किया। मैंने लापता अर्धविराम को तय किया, धन्यवाद

— पाओलो

Answer 6

मैं इस पोस्ट पर ठोकर खाई, अनंत लूप एनीमेशन के लिए jQuery में सीएसएस परिवर्तन का उपयोग करने के लिए देख रहा हूँ। इसने मेरे लिए ठीक काम किया। मैं नहीं जानता कि यह कितना पेशेवर है।

function progressAnim(e) {
    var ang = 0;

    setInterval(function () {
        ang += 3;
        e.css({'transition': 'all 0.01s linear',
        'transform': 'rotate(' + ang + 'deg)'});
    }, 10);
}

उपयोग करने का उदाहरण:

var animated = $('#elem');
progressAnim(animated)

Answer 7

//this should allow you to replica an animation effect for any css property, even //properties //that transform animation jQuery plugins do not allow

            function twistMyElem(){
                var ball = $('#form');
                document.getElementById('form').style.zIndex = 1;
                ball.animate({ zIndex : 360},{
                    step: function(now,fx){
                        ball.css("transform","rotateY(" + now + "deg)");
                    },duration:3000
                }, 'linear');
            }