Material-ui: क्या कीफ़्रेम एनिमेशन काम करते हैं?

को निर्मित 4 दिस॰ 2018 · 9टिप्पणियाँ · स्रोत: mui-org/material-ui

मैं जेएसएस पर बताए गए

const MyComponentWithStyles = withStyles(() => ({
  "<strong i="7">@keyframes</strong> fadeAnimation": {
    from: {opacity: 0},
    to: {opacity: 1},
  },
  container: {
    width: "100px",
    height: "100px",
    background: "red",
    animation: "1s fadeAnimation",
  }
}))(MyComponent)

कुछ खोज करने के बाद मुझे यह अक्सर पूछे जाने वाले प्रश्न प्रश्न मिले, जहां यह कीफ़्रेम एनिमेशन के लिए 'सीएसएस विकल्प' का उपयोग करने के लिए कहता है। मुझे यकीन नहीं है कि 'सीएसएस विकल्प' का क्या इरादा है। पारंपरिक सीएसएस स्टाइल?

साथ ही, इस पुल अनुरोध में एक टिप्पणी है जो कहती है कि कीफ़्रेम एनिमेशन काम नहीं करते हैं। सुनिश्चित नहीं है कि यह टिप्पणी मेरे मुद्दे के लिए कितनी प्रासंगिक है।

incomplete

स्रोत

AntonioRedondo

👍6

सबसे उपयोगी टिप्पणी

भावी पीढ़ी के लिए: makeStyles अंदर एक कीफ़्रेम का उपयोग करना काम नहीं कर रहा था।

उत्पन्न एनीमेशन नाम makeStyles-keyframes-glowIcon-187 जैसा कुछ था जबकि CSS नियम पर रखा गया एनीमेशन नाम केवल glowIcon (JS में प्रयुक्त नाम) था।

मेरे वातावरण में @bjrn द्वारा उद्धृत $ डालने से समस्या ठीक हो गई:

animation: '$glowIcon 2000ms infinite',

keul 17 जुल॰ 2019

👍38 🎉7 ❤6

सभी 9 टिप्पणियाँ

हां, कीफ्रेम काम करते हैं। हम उनका आंतरिक रूप से उपयोग करते हैं: https://github.com/mui-org/material-ui/blob/353c0aedc50de8bb2c09626e520d7cc16ac461dc/packages/material-ui/src/ButtonBase/TouchRipple.js#L84

oliviertassinari 4 दिस॰ 2018

👍14

मैं अभी इस मुद्दे पर भाग गया। जेएसएस दस्तावेज़ों के मुताबिक, किसी को एनीमेशन नाम के सामने $ डालना चाहिए, जो काम नहीं करता है। बस इसे छोड़कर, जैसा कि ऊपर आपके उदाहरण में है, ठीक काम करता है।

bjrn 6 अप्रैल 2019

👍14 🎉7 ❤4

@bjrn यह आपके द्वारा उपयोग किए जा रहे जेएसएस के संस्करण पर निर्भर करता है।

oliviertassinari 6 अप्रैल 2019

भावी पीढ़ी के लिए: makeStyles अंदर एक कीफ़्रेम का उपयोग करना काम नहीं कर रहा था।

मेरे वातावरण में @bjrn द्वारा उद्धृत $ डालने से समस्या ठीक हो गई:

animation: '$glowIcon 2000ms infinite',

keul 17 जुल॰ 2019

👍38 🎉7 ❤6

इस समस्या का सामना करने वाले लोगों के लिए:
https://cssinjs.org/jss-syntax/?v=v10.0.0-alpha.10#keyframes -animation

emrehayirci 26 जुल॰ 2019

👍4 👎1

मुझे एक और समस्या मिली: मेक स्टाइल (प्रतिक्रिया हुक के रूप में प्रयुक्त) + शैली नियम स्तर पर कार्य

मैंने पाया कि जब मैं JSS $ref , animation जनरेशन क्रैश का उपयोग करके स्टाइल नियम स्तर पर फ़ंक्शन प्रदान करता हूं:

animation: ({ duration }) =>  `$glitch ${duration}s infinite`

आउटपुट:

.makeStyles-root-470::before {}

जब मैं रेफरी चार ( $ ) के बिना animation-name प्रदान करता हूं, तो मैं देख सकता हूं कि नियम animation जेनरेट किए जा रहे हैं, लेकिन animation-name @keyframe को संदर्भित नहीं करता है

animation: ({ duration }) =>  `glitch ${duration}s infinite`

आउटपुट:

.makeStyles-root-477::before {
    animation: 1s ease 0s infinite normal none running glitch;
}

फ़ंक्शन के बजाय स्ट्रिंग ठीक काम करती है:

animation: `$glitch 5s infinite`,

आउटपुट:

.makeStyles-root-482:before {
    animation: makeStyles-keyframes-glitch-483 5s infinite;
}

समाधान/समाधान:

 animationDuration: ({ duration }) => `${duration}s`,
 animationIterationCount: 'infinite',
 animationName: `$glitch`,

"@material-ui/core": "^4.1.3",
"@material-ui/icons": "^4.4.1",
"@material-ui/styles": "^4.1.1",

इसके अलावा टीएस स्टाइल नियम स्तर पर फ़ंक्शन का उपयोग करने के बारे में शिकायत करता है :(

wwwebman 15 सित॰ 2019

👍10

`makeStyles()` में मेरे लिए क्या काम नहीं करता है:

sslider:  ({urls}) => ({
      background: `url(${urls[0]})`,
      backgroundRepeat: "no-repeat",
      animation: `$slidingBackgroundAnimation 10s`,
     ...
}),
"<strong i="7">@keyframes</strong> slidingBackgroundAnimation": {
      from: {
        backgroundPositionX: "0px",
      },
      to: {
        backgroundPositionX: "-100px",
      },
},

यहां एनिमेशन का नाम keyframes बुरी तरह से प्रस्तुत किया गया है। जैसे कि वास्तविक एनिमेशन कीफ़्रेम slidingBackgroundAnimation को <head> > <style> में @-webkit-keyframes makeStyles-keyframes-slidingBackgroundAnimation-108 लेकिन sslider css इसे बुरी तरह से संदर्भित करेगा जैसे @-webkit-keyframes makeStyles-keyframes-slidingBackgroundAnimation-109 (के साथ) अलग संख्या)।

क्या काम करता है:

sslider: {
      background: ({ urls }) => `url(${urls[0]})`,
      backgroundRepeat: "no-repeat",
      animation: `$slidingBackgroundAnimation 10s`,
     ....
},
"<strong i="18">@keyframes</strong> slidingBackgroundAnimation" : { ... }

इसके अलावा, यह गतिशील रूप से प्रस्तुत करने के लिए प्रयास करने के लिए बहुत बड़ा दर्द था <strong i="22">@keyframes</strong> animationName का उपयोग करके सहारा संपत्ति का उपयोग कर makeStyles({}) के माध्यम से रंगमंच की सामग्री गुजर useStyles({}) ।

यह वह कोड था जो काम नहीं करता था।

const imageSliderAlgo = (urls) => {
 // a function that accepts urls and dynamically create object to be consumed by the keyframes
 // return example for two images

 return {
  "0%": { backgroundImage: `url(${urls[0]})` },
  "50%": { backgroundImage: `url(${urls[1]})` }
 }
};

const useStyles = makeStyles(theme => ({
 "<strong i="28">@keyframes</strong> slidingBackgroundImageAnimation": ({ urls }) =>
      imageSliderAlgo(urls),
 sslider: { ... }
});

यह प्रॉप्स प्राप्त करने में सक्षम नहीं था, मुझे लगता है कि यह इस तथ्य के कारण है कि प्रॉप्स को classNames या उच्चतर चयनकर्ताओं पर ठीक से पारित नहीं किया गया है, लेकिन सीएसएस संपत्ति में प्रॉप्स का जिक्र करते समय ठीक काम करता है (जैसा कि कोड द्वारा दिखाया गया है) उपरोक्त खंड में)।

बहुत सारे परीक्षणों और त्रुटियों के बाद और बहुत समय जलने के बाद, मैंने सीएसएस-इन-जेएस शैली में कीफ्रेम को गतिशील रूप से प्रस्तुत करने का सबसे अच्छा तरीका निकाला और कस्टम हुक में useStyles() लपेट रहा था और वापस लौट रहा था वहां से makeStyles() ।

const useMyStyles = props => {
  const useStyles = makeStyles(theme => ({
    sslider: {
      background: ({ urls }) => `url(${urls[0]})`,
      animation: `$slidingBackgroundAnimation 30s ease 2s infinite forwards, $slidingBackgroundImageAnimation 20s ease 2s infinite forwards`,
      ...
    },

    // animation 1
    // dynamically rendering keyframes in css-in-js
    // using the props property passed in custom useMyStyles hook while invoking it in main component
    "<strong i="36">@keyframes</strong> slidingBackgroundImageAnimation": imageSliderAlgo(props.urls),

    // animation 2
    // static keyframes in css-in-jss
    "<strong i="37">@keyframes</strong> slidingBackgroundAnimation": {
      "0%": {
        backgroundPositionX: "0px",
      },
      "50%": {
        backgroundPositionX: "-120px",
      }
    },
  })); // useStyles closed

  // returning useStyle function with the props passed in the higher order/parent function
  return useStyles(props); 
} // useMyStyles custom hook closed

// Component
export default function SlidingBackground({ children, urls }) {

  // non-working way
  // const classes = useStyles({ urls });

  // working way
  const classes = useMyStyles({ urls });

  return (
    <>
      <div className={classes.sslider}>{children}</div>
    </>
  );
}

कभी-कभी केवल एक कस्टम हुक या मूल रूप से कस्टम फ़ंक्शन की आवश्यकता होती है।

animeshsinghweb 2 दिस॰ 2019

👍9 👎1

भावी पीढ़ी के लिए: makeStyles अंदर एक कीफ़्रेम का उपयोग करना काम नहीं कर रहा था।
उत्पन्न एनीमेशन नाम makeStyles-keyframes-glowIcon-187 जैसा कुछ था जबकि CSS नियम पर रखा गया एनीमेशन नाम केवल glowIcon (JS में प्रयुक्त नाम) था।
मेरे वातावरण में @bjrn द्वारा उद्धृत $ डालने से समस्या ठीक हो गई:
animation: '$glowIcon 2000ms infinite',

तुम मेरा दिन बचाओ

LittleTheFu 18 फ़र॰ 2020

👍3

कभी-कभी केवल एक कस्टम हुक या मूल रूप से कस्टम फ़ंक्शन की आवश्यकता होती है।

मेरे लिए कोई फर्क नहीं पड़ा

jmayergit 30 जून 2020

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Material-ui: क्या कीफ़्रेम एनिमेशन काम करते हैं?

सबसे उपयोगी टिप्पणी

सभी 9 टिप्पणियाँ

makeStyles() में मेरे लिए क्या काम नहीं करता है:

क्या काम करता है:

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

`makeStyles()` में मेरे लिए क्या काम नहीं करता है: