[Css] التحولات على الشاشة: الملكية


Answers

تحتاج إلى إخفاء العنصر عن طريق وسائل أخرى من أجل الحصول على هذا العمل.

لقد أنجزت التأثير من خلال وضع كل من <div> s بشكل مطلق وتعيين واحد مخفي إلى opacity: 0 .

إذا قمت حتى بتبديل خاصية display من none block ، فلن يحدث النقل الخاص بك على العناصر الأخرى.

للتغلب على هذا الأمر ، اسمح للعنصر أن display: block ، ولكن قم بإخفاء العنصر عن طريق ضبط أي من هذه الوسائل:

  1. اضبط height على 0 .
  2. اضبط opacity على 0 .
  3. ضع العنصر خارج إطار عنصر آخر يحتوي على overflow: hidden .

من المحتمل وجود حلول أكثر ، لكن لا يمكنك إجراء انتقال إذا قمت بتشغيل العنصر المراد display: none . على سبيل المثال ، قد تحاول تجربة شيء مثل هذا:

div {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0; 
}
div.active {
    opacity: 1;
    display: block;
}

لكن هذا لن ينجح. من تجربتي ، لقد وجدت أن هذا لا يفعل شيئا.

ولهذا السبب ، ستحتاج دائمًا إلى الحفاظ على display: block العنصر display: block - ولكن يمكنك الحصول عليه من خلال القيام بشيء كالتالي:

div {
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}
Question

أقوم حاليًا بتصميم نوع من القائمة المنسدلة "CSS-mega dropdown" - وهي في الأساس قائمة منسدلة تتضمن CSS-only فقط ، ولكنها تحتوي على أنواع مختلفة من المحتوى.

في هذه اللحظة ، يبدو أن CSS3 Transitions لا تنطبق على خاصية 'display' ، أي أنه لا يمكنك القيام بأي نوع من الانتقال من display: none display: block (أو أي مجموعة).

هل يمكن لأي شخص أن يفكر في طريقة لقائمة الطبقة الثانية من المثال أعلاه "للتلاشي" عندما يمرر شخص ما أحد عناصر القائمة العليا؟

أنا على دراية بأنه يمكنك استخدام التحولات في visibility: الملكية ، ولكن لا يمكنني التفكير في طريقة لاستخدام ذلك بشكل فعال.

لقد حاولت أيضا استخدام الطول ولكن ذلك فشل فشلا ذريعا.

كما أنني أدرك أنه من المستحيل تحقيق ذلك باستخدام جافا سكريبت ، لكني أردت تحدي نفسي لاستخدام CSS فقط وأعتقد أني قادم قليلاً.

كل وأي اقتراحات أخرى موضع ترحيب.




بلدي خدعة جافا سكريبت أنيق هو فصل السيناريو بأكمله إلى وظيفتين مختلفتين !

لإعداد الأشياء ، يتم الإعلان عن متغير عالمي واحد ويتم تعريف معالج الحدث:

  var tTimeout;
  element.addEventListener("transitionend", afterTransition, true);//firefox
  element.addEventListener("webkitTransitionEnd", afterTransition, true);//chrome

ثم ، عند إخفاء عنصر ، أستخدم شيئًا كالتالي:

function hide(){
  element.style.opacity = 0;
}

function afterTransition(){
  element.style.display = 'none';
}

لإعادة الظهور في العنصر ، أفعل شيئًا كالتالي:

function show(){
  element.style.display = 'block';
  tTimeout = setTimeout(timeoutShow, 100);
}

function timeoutShow(){
  element.style.opacity = 1;
}

إنه يعمل ، حتى الآن!




أعرف أن هذا سؤال قديم جدًا ولكن بالنسبة للأشخاص الذين ينظرون إلى هذا الموضوع ، يمكنك إضافة رسم متحرك مخصص إلى خاصية الحظر الآن.

@keyframes showNav {
  from {opacity: 0;}
  to {opacity: 1;}
}
.subnav-is-opened .main-nav__secondary-nav {
  display: block;
  animation: showNav 250ms ease-in-out both;
}

Demo

في هذا العرض التوضيحي ، تتغير القائمة الفرعية من display:none display:block وما زالت تديرها لتتلاشى.




It can be handle by using transition timing functions step-end and step-start

For example: https://jsfiddle.net/y72h8Lky/

$(".run").on("click", function() {
    $(".popup").addClass("show");
});
$(".popup").on("click", function() {
    $(".popup").removeClass("show");
})
.popup {
    opacity: 0;
    display: block;
    position: absolute;
    top: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1450;
    background-color: rgba(0, 175, 236, 0.6);
    transition: opacity 0.3s ease-out, top 0.3s step-end;
}
.popup.show {
    transition: opacity 0.3s ease-out, top 0.3s step-start;
    opacity: 1;
    top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup"></div>
<button class="run" style="font-size: 24px;">Click on me</button>




أعتقد أن SalmanPK لديه الإجابة الأقرب ، فهو يتلاشى عنصرًا ما داخل أو خارج ، مع الرسوم المتحركة CSS التالية. لكن خاصية العرض لا تحرك بسلاسة ، فقط العتامة.

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

@-webkit-keyframes fadeOut {
    from { opacity: 1; }
      to { opacity: 0; }
}

إذا كنت ترغب في تحريك العنصر الذي يتحرك من كتلة العرض بحيث لا يتم عرضه ، فلا يمكنني أن أرى أنه ممكن حاليًا مع CSS فقط ، يجب عليك الحصول على الارتفاع واستخدام الرسوم المتحركة في CSS لتقليل الارتفاع. هذا الأمر ممكن مع CSS كما هو موضح في المثال أدناه ، ولكن قد يكون من الصعب معرفة قيم الارتفاع الدقيقة التي تحتاج إلى تحريكها لعنصر ما.

مثال jsFiddle

CSS

@-webkit-keyframes pushDown {
  0% {
    height: 10em;
  }
  25% {
    height: 7.5em;
  }
  50% {
    height: 5em;
  }
  75% {
    height: 2.5em;
  }
  100% {
    height: 0em;
  }
}

.push-down {
    -webkit-animation: pushDown 2s forwards linear;
}

جافا سكريبت

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

// push item down
element.className = element.className + " push-down";



There is a alternate solution with css animation for drop-down hidden:

.dropdown{   
  position: relative;
  width: 100%;
 -webkit-animation-name: animatetop;
 -webkit-animation-duration: 0.4s;
 animation-name: animatetop;
 animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
 from {top:-300px; opacity:0} 
 to {top:0; opacity:1}
}

@keyframes animatetop {
 from {top:-300px; opacity:0}
 to {top:0; opacity:1}
}



تغيير overflow:hidden إلى overflow:visible . إنه يعمل بشكل أفضل. أنا استخدم مثل هذا:

#menu ul li ul {
    background-color:#fe1c1c;
    width:85px;
    height:0px;
    opacity:0;
    box-shadow:1px 3px 10px #000000;
    border-radius:3px;
    z-index:1;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.6s ease;
}

#menu ul li:hover ul  {
    overflow:visible;
    opacity:1;
    height:140px;
}

visible هو أفضل لأن overflow:hidden فعل overflow:hidden تمامًا مثل display:none .




لقد صادفت هذه المشكلة عدة مرات ، والآن ذهبت ببساطة مع:

.block {
  opacity: 1;
  transition: opacity 250ms ease;
}

.block--invisible {
  pointer-events: none;
  opacity: 0;
}

من خلال إضافة block--invisible الفئة block--invisible ، لن تكون العناصر بأكملها قابلة للنقر ، ولكن كل العناصر التي تقف وراءها ستكون بسبب pointer-events:none يدعمها جميع المتصفحات الرئيسية.




إن أبسط حل عالمي للمشكلة هو: لا تتردد في تحديد display:none في CSS ، ولكنك ستقوم بتغييره block (أو أي شيء آخر) باستخدام JavaScript ، وبعد ذلك سيتعين عليك إضافة فئة إلى العنصر الخاص بك في السؤال الذي يقوم بالفعل الانتقال مع setTimeout () . هذا كل شئ.

أي:

<style>
#el {
    display: none;
    opacity: 0;
}
#el.auto-fade-in {
    opacity: 1;
    transition: all 1s ease-out; /* future, future, please come sooner! */
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
}
</style>

<div id=el>Well, well, well</div>

<script>
var el = document.getElementById('el');
el.style.display = 'block';
setTimeout(function () { el.className = 'auto-fade-in' }, 0);
</script>

اختبارها في أحدث المتصفحات عاقل. من الواضح أنه لا ينبغي العمل في IE9 أو في وقت سابق.




يمكنك القيام بذلك من خلال أحداث النقل ، لذا فأنت كذلك ، حيث تقوم بإنشاء فئتين من css للتحويل ، أحدهما يحمل الرسوم المتحركة الأخرى ، ويمسك بحالة العرض. وقمت بتبديلها بعد انتهاء الرسوم المتحركة؟ في حالتي يمكنني عرض divs مرة أخرى إذا ضغطت على btn ، وقم بإزالة كلا الصفوف.

جرب التقطيع أدناه ...

$(document).ready(function() {
  //assign transition event
  $("table").on("animationend webkitAnimationEnd", ".visibility_switch_off", function(event) {
    //we check if this is the same animation we want  
    if (event.originalEvent.animationName == "col_hide_anim") {
      //after the animation we assign this new class that basically hides the elements.    
      $(this).addClass("animation-helper-display-none");
    }

  });

  $("button").click(function(event) {

    $("table tr .hide-col").toggleClass(function() {
      //we switch the animation class in a toggle fashion...
      //and we know in that after the animation end, there is will the animation-helper-display-none extra class, that we nee to remove, when we want to show the elements again, depending on the toggle state, so we create a relation between them.
      if ($(this).is(".animation-helper-display-none")) {
        //im toggleing and there is already the above classe, then what we want it to show the elements , so we remove both classes...        
        return "visibility_switch_off animation-helper-display-none";
      } else {
        //here we just want to hide the elements, so we just add the animation class, the other will be added later be the animationend event...        
        return "visibility_switch_off";
      }

    });

  });

});
table th {
  background-color: grey;
}

table td {
  background-color: white;
  padding:5px;
}

.animation-helper-display-none {
  display: none;
}

table tr .visibility_switch_off {
  animation-fill-mode: forwards;
  animation-name: col_hide_anim;
  animation-duration: 1s;
}

@-webkit-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-moz-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-o-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes col_hide_anim {
  0%   {opacity: 1;}
  100% {opacity: 0;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <theader>
    <tr>
      <th>Name</th>
      <th class='hide-col'>Age</th>
      <th>Country</th>
    </tr>
  </theader>
  <tbody>
    <tr>
      <td>Name</td>
      <td class='hide-col'>Age</td>
      <td>Country</td>
    </tr>
  </tbody>
</table>

<button>Switch - Hide Age column with fadeout animation and display none after</button>




أظن أن السبب وراء تعطيل عمليات النقل في حالة تغيير "العرض" هو سبب العرض الفعلي. لا يغير أي شيء يمكن أن يكون متحرك بسلاسة.

"العرض: لا شيء" ، و "الرؤية: مخفية" ، هما شيئان مختلفان تمامًا . كلاهما لهما تأثير جعل العنصر غير مرئي ، ولكن مع "الرؤية: مخفي" ، لا يزال يتم عرضه في التخطيط ، ولكن ليس بشكل واضح . لا يزال العنصر المخفي يحتل مساحة ، ولا يزال مضمَّنًا أو ككتلة أو جدول مضمَّن أو جدول أو أيًا كان عنصر "العرض" يخبرك به ، ويستهلك المساحة وفقًا لذلك. عناصر أخرى لا تتحرك تلقائيا لتشغل تلك المساحة. لا يؤدي العنصر المخفي فقط إلى عرض وحدات البكسل الفعلية الخاصة به إلى المخرجات.

على الجانب الآخر ، فإن "display: none" تمنع العنصر من العرض تمامًا . لا يشغل أي مساحة تخطيط. العناصر الأخرى التي كان من الممكن أن تشغل بعض أو كل الفراغ الذي يستغرقه هذا العنصر تتكيف الآن مع احتلال ذلك الفضاء ، كما لو أن العنصر ببساطة لم يكن موجودًا على الإطلاق .

"العرض" ليس مجرد سمة مرئية أخرى. فهو يحدد وضع العرض بالكامل للعنصر ، سواء كان عبارة عن كتلة ، أو مضمنة ، أو مضمنة ، أو جدول ، أو صف جدول ، أو خلية جدول ، أو عنصر قائمة ، أو أيا كان! كل منها له تشعبات تخطيطية مختلفة جدًا ، ولن تكون هناك طريقة معقولة لتحريكها أو نقلها بسلاسة (حاول تخيل انتقال سلس من "block" إلى "inline" أو العكس بالعكس ، على سبيل المثال!).

هذا هو السبب في تعطيل الانتقالات في حالة تغيير العرض (حتى إذا كان التغيير من "لا شيء" أو لا "- لا شيء" - لا شيء) ليس مجرد invisiblity ، بل هو وضع عرض العنصر الخاص به الذي يعني عدم التقديم على الإطلاق!) ،




you can also use this:

.dropdown {
height: 0px;
width: 0px;
opacity: .0;
color: white;
}
.dropdown:hover {
height: 20px;
width: 50px;
opacity: 1;
transition: opacity 200ms;
/* Safari */
-webkit-transition: opacity 200ms;
}



لا javascript المطلوبة ، وليس هناك حاجة إلى أقصى ارتفاع ضخم شنيع. بدلاً من ذلك ، قم بتعيين الحد الأقصى للارتفاع على عناصر النص ، واستخدم وحدة خطية نسبية مثل rem أو em. وبهذه الطريقة ، يمكنك تعيين ارتفاع أقصى للارتفاع من الحاوية ، مع تجنب التأخير أو "الظهور" عند إغلاق القائمة:

HTML

<nav>
  <input type="checkbox" />
  <ul>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
  </ul>
</nav>

CSS

nav input + ul li { // notice I set max-height on li, not ul
   max-height: 0;
}

nav input:checked + ul li {
   max-height: 3rem; // a little bigger to allow for text-wrapping - but not outrageous
}

شاهد مثالاً هنا: http://codepen.io/mindfullsilence/pen/DtzjE




ركضت هذا اليوم ، مع position: fixed مشروط position: fixed أعيد استخدامه. لم أتمكن من إبقاؤه على display: none ثم حركته ، حيث قفز إلى مظهره ، وفقط z-index (القيم السالبة ، الخ) أشياء غريبة أيضًا.

كنت أيضا باستخدام height: 0 إلى height: 100% ، لكنه لم يعمل إلا عندما بدا أن الوسائط. هذا هو نفسه كما لو كنت تستخدم left: -100% أو شيء من هذا.

ثم أدهشني أن هناك إجابة بسيطة. و voila:

أولا ، لديك الوسائط الخفية. لاحظ أن height هو 0 ، وتحقق من إعلان height في الانتقالات ... إنه يحتوي على 500ms ، وهو أطول من انتقال opacity . تذكر أن هذا يؤثر على عملية الانتقال المتأتيّة الخارجة: إعادة الشيف إلى حالته الافتراضية.

#modal-overlay {
    background: #999;
    background: rgba(33,33,33,.2);
    display: block;
    overflow: hidden;
    height: 0;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    -webkit-transition: height 0s 500ms, opacity 300ms ease-in-out;
       -moz-transition: height 0s 500ms, opacity 300ms ease-in-out;
            -ms-transition: height 0s 500ms, opacity 300ms ease-in-out;
         -o-transition: height 0s 500ms, opacity 300ms ease-in-out;
        transition: height 0s 500ms, opacity 300ms ease-in-out;
}

ثانيا ، الوسائط المرئية الخاصة بك. لنفترض أنك تقوم بتعيين .modal-active إلى body . الآن height 100% ، وتغير انتقالي أيضا. أريد أن يتم تغيير height فورًا ، وأن 300ms .

.modal-active #modal-overlay {
    height: 100%;
    opacity: 1;
    z-index: 90000;
    -webkit-transition: height 0s, opacity 300ms ease-in-out;
       -moz-transition: height 0s, opacity 300ms ease-in-out;
        -ms-transition: height 0s, opacity 300ms ease-in-out;
         -o-transition: height 0s, opacity 300ms ease-in-out;
            transition: height 0s, opacity 300ms ease-in-out;
}

هذا كل شيء ، إنه يعمل مثل السحر.