तो मुझे एक आइकन के साथ एक छोटा सर्कल आकार मिला, जब मैं क्लिक करता हूं, तो यह आइकन गायब हो जाएगा और कुछ तत्वों को दूसरे div में दिखाएगा। वृत्त का आकार CSS एनिमेशन के साथ 260x260 px वर्ग में बदल जाता है।

उस समय तक मैं ठीक था, लेकिन मैं फेडइन/फीडऑट काम नहीं कर सकता। क्या मूल तत्व पर एक सीएसएस वर्ग को टॉगल करके इसे संभालने का कोई तरीका है?

मैं अस्पष्टता 0 से अस्पष्टता 1 का उपयोग नहीं कर सकता क्योंकि मुझे वास्तव में प्रदर्शन के साथ गायब होने के लिए आइकन की आवश्यकता है। सर्कल+आइकन स्थिति में वापस जाने पर दूसरे के लिए समान। लेकिन मैं अभी अस्पष्टता एनीमेशन काम भी नहीं कर सकता। मैंने फ़ेडइन और फ़ेडऑट के उन कीफ़्रेम के साथ भी कोशिश की, लेकिन काम नहीं किया।

मुझे यह fiddle मिला, लेकिन इसका उपयोग करना इतना बदसूरत लगता है एक सेटटाइमआउट।

क्या इसे केवल सीएसएस के साथ हल करने का कोई तरीका है?

$('.toggle-btn').click(function() {
  $('.parent').toggleClass('expanded');
});
.parent {
  width: 40px;
  height: 40px;
  background-color: lightgray;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  position: fixed;
  left: 11px;
  bottom: 18px;
  text-align: center;
  transition: all 500ms;
  -webkit-transition: all 500ms;
  -moz-transition: all 500ms;
}

.parent.expanded {
  width: 200px;
  height: 200px;
  border-radius: 0 14px 0 0;
  left: 0;
  bottom: 0;
}

.children-1 {
  display: block;
  animation: opacity-up 500ms linear 700ms 1;
  animation-fill-mode: forwards;
}

.help {
  width: 21px;
  height: 21px;
  position: relative;
  top: 9px;
}

.children-2 {
  display: none;
  animation: opacity-down 500ms linear 700ms 1;
  animation-fill-mode: forwards;
}

.parent.expanded .children-1 {
  animation: opacity-down 500ms linear 700ms 1;
  animation-fill-mode: forwards;
  display: none;
}

.parent.expanded .children-2 {
  animation: opacity-up 500ms linear 700ms 1;
  animation-fill-mode: forwards;
  display: block;
}

@keyframes opacity-down {
  0% {
  	visibility: visible;
    opacity: 1;
  }
  100% {
  	opacity: 0;
  	visibility: hidden;
  }
}

@keyframes opacity-up {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
  	opacity: 1;
  	visibility: visible;
  }
}

/*
@-webkit-keyframes fadeIn { 
  0% { opacity: 0;
    visibility: hidden;
    display: none;  }
  100% { opacity: 1;
    visibility: visible;
    display: block; }
}

@keyframes fadeIn {
  0% { opacity: 0;
    visibility: hidden;
    display: none;  }
  100% { opacity: 1;
    visibility: visible;
    display: block; }
}

@-webkit-keyframes fadeOut { 
  0% { opacity: 1;
    visibility: visible;
    display: block; }
  100% { opacity: 0;
    visibility: hidden;
    display: none; }
}

@keyframes fadeOut {
  0% { opacity: 1;
    visibility: visible;
    display: block; }
  100% { opacity: 0;
    visibility: hidden;
    display: none;  }
}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="children-1">
    <img class="help" src="http://media1.calvinklein.com/images/static/e-comm/icons/questionMark.png"/>
  </div>
  <div class="children-2">
    <p class="paragraph">
      Here is some content+inputs+other stuff, Here is some content+inputs+other stuff
    </p>
  </div>
</div>

<button class="toggle-btn">TOGGLE!</button>
1
msqar 1 अप्रैल 2017, 02:14
सुनिश्चित नहीं हैं कि यह काम करेगा... इस पेन को चेक करें codepen.io/repzeroworld/pen/jBXRLX ए>।
 – 
repzero
1 अप्रैल 2017, 02:32
Omfg यह एक आकर्षण की तरह काम करता है !! आप ही है वह आदमी! मुझे आपके कोड पर कुछ ठीक करना था, आपको "रैखिक" पर एक टाइपो त्रुटि थी क्योंकि यह "रैखिक" है, इसे जोड़ा और कमाल का काम किया! इसे एक उत्तर के रूप में पोस्ट करें और मैं इसे चिह्नित करूंगा :) धन्यवाद!
 – 
msqar
1 अप्रैल 2017, 02:34
उत्तर पोस्ट किया गया: डी
 – 
repzero
1 अप्रैल 2017, 02:35
सुनिश्चित करें कि आप अपने प्रश्न शीर्षक से सीएसएस "एनीमेशन" निकालते हैं, इसलिए सभी को पता चल जाएगा कि आप कक्षाओं के साथ एक सरल संक्रमण दृष्टिकोण चाहते हैं।
 – 
repzero
1 अप्रैल 2017, 02:37

1 उत्तर

सबसे बढ़िया उत्तर

उस समय तक मैं ठीक था, लेकिन मैं फेडइन/फीडऑट काम नहीं कर सकता। क्या मूल तत्व पर एक सीएसएस वर्ग को टॉगल करके इसे संभालने का कोई तरीका है?

आप इसे बिना एनीमेशन के टॉगल कक्षाओं के साथ कर सकते हैं

$('.toggle-btn').click(function() {
  $('.parent').toggleClass('expanded');
  $('.children-2').toggleClass('show1');
  $('.children-1').toggleClass('show2');
});
.parent {
  width: 40px;
  height: 40px;
  background-color: lightgray;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  position: fixed;
  left: 11px;
  bottom: 18px;
  text-align: center;
  transition: all 500ms;
  -webkit-transition: all 500ms;
  -moz-transition: all 500ms;
}

.parent.expanded {
  width: 200px;
  height: 200px;
  border-radius: 0 14px 0 0;
  left: 0;
  bottom: 0;
}

.children-1 {
  display: block;
  animation: opacity-up 500ms lineal 0s 1;
  animation-fill-mode: forwards;
}

.help {
  width: 21px;
  height: 21px;
  position: relative;
  top: 9px;
}

.children-2 {
  opacity: 0;
  transition: opacity 1s;
}

.children-1 {
  opacity: 1;
  transition: opacity 1s;
}

.show1 {
  opacity: 1;
}

.show2 {
  opacity: 1;
}

.parent.expanded .children-1 {
  animation: opacity-down 500ms lineal 0s 1;
  animation-fill-mode: forwards;
  display: none;
}

.parent.expanded .children-2 {
  animation: opacity-up 500ms lineal 0s 1;
  animation-fill-mode: forwards;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="children-1">
    <img class="help" src="http://media1.calvinklein.com/images/static/e-comm/icons/questionMark.png" />
  </div>
  <div class="children-2">
    <p class="paragraph">
      Here is some content+inputs+other stuff, Here is some content+inputs+other stuff
    </p>
  </div>
</div>

<button class="toggle-btn">TOGGLE!</button>
1
repzero 1 अप्रैल 2017, 02:35