Ionic-framework: خطأ: يظهر الفلاش الأبيض عند التبديل بين علامات التبويب على Android

أي كلمة عن وضع هذه القضية؟

تواجه نفس المشكلة. أي تحديثات؟

+1

يرجى تقديم مثال بسيط على هذه المشكلة.

ما عليك سوى إنشاء تطبيق أيوني جديد (قالب علامات تبويب) لتغيير الخلفية إلى أي لون إما أن يكون أبيض. الإنشاء والتشغيل على جهاز android (4.4 ، تم اختباره على nexus 5) وستلاحظ وجود نقرة بيضاء لبضعة مللي في كل تغيير في علامة التبويب.

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

يتم إنشاء شريط الرأس الأيوني تلقائيًا بالنسبة لي ، أين (وكيف) تستخدمه يدويًا؟

إذن GentryRiggen تقصد شريط التنقل الأيوني؟

mhartington أنا أستخدم قائمة الجانب الأيوني مع علامات تبويب أيونية داخل محتوى قائمة الجانب الأيوني.

<ion-side-menus>
  <ion-side-menu side="left" class="left-side-menu">
    <ion-content drag-content="false" overflow-scroll="false" direction="y" delegate-handle="leftMenu">
      <div class="list">
        <a menu-close class="item item-icon-left" >Something</a>
        <a menu-close class="item item-icon-left" >Something</a>
        <a menu-close class="item item-icon-left" >Something</a>
      </div>
    </ion-content>
  </ion-side-menu>

  <ion-side-menu-content>
    <ion-header-bar align-title="center" class="bar-positive">
      <button class="button button-icon icon ion-navicon" menu-toggle="left"></button>
      <div class="titles">
            <h>TITLE</h1>
      </div>
    </ion-header-bar>

    <ion-tabs class="tabs-positive tabs-icon-only dark-background">
      <ion-tab>
        <ion-nav-view name="tab-1"></ion-nav-view>
      </ion-tab>

      <ion-tab>
        <ion-nav-view name="tab-2"></ion-nav-view>
      </ion-tab>

      <ion-tab>
        <ion-nav-view name="tab-3"></ion-nav-view>
      </ion-tab>
    </ion-tabs>
  </ion-side-menu-content>

</ion-side-menus>

لا تستخدم شريط الرأس الأيوني لذلك ، استخدم شريط التنقل الأيوني.

mhartington Im باستخدام "شريط التنقل الأيوني"
فكيف تقترح إصلاحه؟

تظهر علامات التبويب البسيطة "بداية" من الأيونية المصممة لنظام Android الفلاش بين التنقل والذي أعتقد أنه يستخدم شريط التنقل الأيوني.

حسنًا ، أنا لا أراها في اختباراتي.

https://youtu.be/_ja8a08iSPE

يمكنك رؤيته في الفيديو .. إنه وميض الشاشة البيضاء عند تغيير علامات التبويب .. يظهر لبضعة أجزاء من الألف من الثانية ... إذا كنت تريد أن ترى بشكل أكثر وضوحًا تغيير لون الخلفية إلى اللون الأحمر أو الأزرق أو أي لون غامق.

هل تتحدث عن شريط التنقل المتلاشي

إنه يتحدث عن الشاشة البيضاء (محيط محتوى الأيونات) التي تظهر لفترة وجيزة عند تبديل علامات التبويب.
يمكنك رؤيتها بوضوح في الفيديو الخاص بك عند التبديل في المرة الأولى من "الحالة" إلى "الدردشات". لكنها في الواقع تظهر في كل مرة.

mhartington لقد أرفقت مقطع فيديو من تطبيقي (حركة بطيئة) يمكنك رؤيته بوضوح مُلحق هناك.
أود أن أتخذ إجراءً وأن أساعدكم على حل هذه المشكلة ، لكني أحتاج على الأقل إلى نقطة بداية منك .. من أين أبدأ؟

رابط يوتيوب: https://youtu.be/TTuNPlL6Fmg

شكرا.

لقد ألقيت نظرة على الكود وبالنسبة لي الخطأ موجود في علامة التبويب الوظيفة المحددة (توجيه أيونتاب)
يبدو أنه يخفي علامة التبويب السابقة قبل إظهار علامة التبويب الجديدة.

يبدو أن هذا الاختراق القذر الذي قمت به يعمل. لكني أرغب في رؤية الإصلاح المناسب.
فقط أضف مهلة حول $ ionicViewSwitcher.viewEleIsActive (childElement ، false) ؛

السطر 55025 من ionic.bundle.js

$timeout(function () {
 $ionicViewSwitcher.viewEleIsActive(childElement, false);
}, 100);

هذا يحدث لي مع:

• أيوني ، v1.0.1
• كوردوفا 5.3.3

أنا أقوم بتشغيل Android 5.1.1 على Nexus 4.

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

لقد حاولت إضافة أنماط لفرض وقت الانتقال إلى 0 مللي ثانية على Android وتحققت من أن التطبيق قد طبق هذه الأنماط على أي عنصر رأس عن طريق التحقق من ذلك مع فاحص الكروم المرفق وفحص قيم CSS المحسوبة. لقد تحققت من خلال إزالة الأنماط والتحقق من أنها انتقلت من 0 مللي ثانية إلى رقم آخر (0.2 مللي ثانية أو 0.5 مللي ثانية - وفي الواقع بنفس سرعة تأثير الوميض).

حاولت إجراء إصلاح didbarbosa ولكن Chrome على المتصفح وتطبيق الهاتف اشتكى كلاهما من أن $ timeout لم يتم تحديده. عندما قمت بتسجيل قيمة المهلة $ ، لم يتم تحديدها بالفعل.

@ lloy0076 تحتاج إلى

IonicModule
.directive('ionTab', [
  '$compile',
  '$ionicConfig',
  '$ionicBind',
  '$ionicViewSwitcher',
  '$timeout',
function($compile, $ionicConfig, $ionicBind, $ionicViewSwitcher,$timeout) {

didbarbosa - في الواقع لقد لاحظت للتو أن إصدار Ionic الخاص بي ليس أحدث إصدار ؛ وهكذا قمت بتغيير "bower.json" ليقرأ:

{
"الاسم": "HelloIonic"،
"خاص": "صحيح" ،
"devDependencies": {
"أيوني": "driftyco / ionic-bower # ~ 1"،
"platform.js": "platform # ~ 1.3.0"

... وهل تصدق أنه لا يوجد وميض حتى بدون حل المهلة $ ...

ربما إذا جربت الشيء نفسه مع حل CSS الانتقالي ، فقد "يصلح" نفسه فقط - على الرغم من أنني أكره المشكلات التي تصلح نفسها بطريقة سحرية من هذا القبيل.

نعم يبدو أنه اختفى مع الإصدار الليلي.
أخبار جيدة :)

في الواقع لم يتم إصلاحه بالنسبة لي.

غير ثابت بالنسبة لي 2: \

أي أخبار عن هذا الموضوع؟

لدي هذه المشكلة على iOS أيضًا.

harryzun بخصوص iOS ، يرجى الاطلاع على https://github.com/driftyco/ionic/issues/4395

على iOS ليست المشكلة نفسها

لقد بدأت للتو في ملاحظة هذا على Android في وقت ما بعد أن قمت بالترقية إلى v1.1. لست متأكدا عندما بدأت بالرغم من ذلك.

بدأت حول الإصدار 1

إذا كان لدى أي شخص إصلاح (مؤقت) ، فأنا أحب سماعه.

أنا نفس الحشرة ... أي شخص لديه المزيد من المعلومات ؟؟ :أخطبوط:

ربما لم تكن ذات صلة ، ولكن كان لدي مشكلة مماثلة في وقت سابق ، ولسبب غريب ، أدى حذف cache: false من تعريف الولاية الخاص بي لحالة علامة تبويب الأخ المخالف إلى حل المشكلة. ليس لدي أي فكرة عن السبب ، نظرًا لأننا نستخدم نفس النمط ، مع نفس وحدة التحكم + مجموعة القوالب ، في 3 أماكن أخرى في إعداد علامة التبويب الخاصة بنا دون أي مشكلة.

تحديث

لذلك قضيت القليل من الوقت في محاولة الوصول إلى الجزء السفلي من المشكلة التي رأيناها ، وكانت مثيرة للاهتمام وقليلًا من السذاجة من جانبي تؤدي إلى وميض اللون الأسود قبل stateChangeSuccess.

لذلك كما ذكرنا أعلاه ، نستخدم نفس النمط في جميع أنحاء تطبيقنا ، ولكن مع اختلاف رئيسي واحد: كان لهذه الحالة في الواقع حل مدعوم من واجهة برمجة التطبيقات في تعريف الحالة الخاص بها للتغلب على عيب لدينا حاليًا في نهايتنا الخلفية والذي لم نفعله يجب حسابه مع حالات x3 الأخرى التي تستخدم هذا النمط.

كانت حالة "الدردشة" أحد أشقاء الحالة الرئيسية لعلامة التبويب. للوصول إلى هذه الحالة ، ما عليك سوى النقر فوق أحد الأعضاء في العرض الرئيسي وينتهي بك الأمر في حالة الدردشة الشقيقة. عند الانتقال إليه من الأخ ، لم يلاحظ أي وميض أسود ، وستكون الحالة الرئيسية مرئية حتى ينتهي الحل ، ثم ينتهي التنقل العادي. عند الانتقال مرة أخرى إلى علامة التبويب (من علامة تبويب أخرى) مع عرض الدردشة كالحالة الحالية في التاريخ ، سيقوم ui-router + ionic بتنفيذ التبديل إلى علامة التبويب الجديدة على الفور ، لكن الشاشة السوداء ستكون مرئية حتى اكتمال الحل .

هذا أمر منطقي أيضًا بسبب إزالة cache: false والتخلف عن القيمة الصحيحة إلى حل المشكلة.

يبدو منطقيًا تمامًا عندما تفكر في الأمر على ما أعتقد. آمل أن يكون هذا قادرًا على إنقاذ شخص ما من صداع إذا تعثر في ذلك عبر google (بنفس الطريقة التي فعلت بها).

لقد تتبعت هذا حتى هذا الخط:
https://github.com/driftyco/ionic/blob/af1bfef327e685585244c6051c4d38b98aa6c62a/js/angular/service/viewSwitcher.js#L194

          if (renderStart && renderEnd) {
            // CSS "auto" transitioned, not manually transitioned
            // wait a frame so the styles apply before auto transitioning
            //$timeout(onReflow, 16); <- original
            onReflow(); // removes flicker
          } else if (!renderEnd) {

إنه سبب وميض الإطار الواحد عند تبديل علامات التبويب ، لأنه لم يتم تعيين علامة التبويب الجديدة لتكون مرئية حتى 16 مللي ثانية لاحقًا.

لست متأكدًا من الهدف من هذا السطر عند تضمين علامات التبويب ، ولكن إذا استبدلت استدعاء $timeout باستدعاء طريقة بسيطة onReflow() ، فإن الأداء المتصور يتحسن بشكل كبير وهناك لا مزيد من الوميض. ولا حتى في شريط التنقل.

mhartington أي أفكار بخصوص هذا؟ ربما ينبغي جعله قابلاً للتكوين على أقل تقدير.

يبدو أنه مقدم من خلال https://github.com/driftyco/ionic/commit/8ebde73d0b8afac1bf1c1787c90a72a28a88bc3a من adamdbradley

تحرير: يبدو أن الحل الأفضل هو تغيير حالة if إلى:

if (direction !== 'swap' && renderStart && renderEnd) {

Edit2: أحد الحلول الأفضل للتخلص من أي آثار جانبية محتملة هو استبدال مكالمة $timeout بـ:
ionic.requestAnimationFrame(onReflow);
سأرسل العلاقات العامة معها.

تم فتح العلاقات العامة https://github.com/driftyco/ionic/pull/4654

عمل جيد جدا!
يصلح المشكلة بالنسبة لي.

شكرا جزيلا يا صديقي.

لم ينجح معي ... لقد قمت بتحديث ملف ionic-angular.js الخاص بي ولكني لا أرى أي تغيير حتى إذا كنت أقوم بزيادة قيمة المهلة الأولية. هل فاتني شيء؟
بالنسبة إلى وميض شريط التنقل ، استخدمت هذا الإصلاح https://forum.ionicframework.com/t/flickering-when-navigating-via-tabs-on-android/27281 ولكن المحتوى الآن هو الخفقان.

أخيرًا ، إنها تعمل ولكنها لا تزال تومض مرة واحدة في المرة الأولى لكل علامة تبويب ، أي فكرة لماذا؟

هل هناك أي خطة إطلاق بشأن هذه القضية؟ 1.2 أم 1.3؟

تم تضمينه في الإصدار 1.2 الأخير.

+1 ، هل هناك أي حلول أخرى؟

واو هذا لا يزال مستمراً ... هل كان التفكير في أن الفريق الأساسي سيكون لديه فكرة جيدة عن ماهية هذا الأمر؟

1.2 هل أصلح هذا؟ كان هناك التزام كان يجب أن يعالج هذه المسألة.

الخطأ لا يزال هنا من 1.2 إلى 1.2.2

لقد حاولت مرة أخرى وتم حلها إذا وضعت:

ionic.requestAnimationFrame(onReflow);  

كما قال وليس:

$timeout(function() {
              ionic.requestAnimationFrame(onReflow);
            });

من الواضح أن $ timeout يفعل شيئًا ما

mlynch ربما تتذكر ما كان هذا من أجله؟ https://github.com/driftyco/ionic/commit/d0246cf975bb4022eb890d3b0c28964e3065644c#diff -e25bdd32bda2f4f00f01c823ec86b1f3

يبدو أنه كسرها مرة أخرى.

ربما هذا هو السبب:

إذا تم وضع الشفرة في قائمة الانتظار باستخدام مهلة $ ، فيجب تشغيلها بعد معالجة Angular لـ DOM ، وبعد عرض المتصفح (مما قد يتسبب في حدوث وميض في بعض الحالات)

مراجعة 1.2.5

لسوء الحظ ، أدى هذا إلى كسر # 4782 مما تسبب في عدم تحريك الرؤية الخلفية في بعض الأحيان بشكل صحيح. قد تكون إزالة $timeout مفرطة في التبسيط لحل هذه المشكلة.

لا يزال لدي مشكلة حتى عندما أزيل المهلة ..

+1

هل لديك هذه المشكلات أيضًا ...

+1

+1

ملاحظة ، يساعد تحديث bower.json الخاص بك (التمييز الصحيح) ، ولكن هناك تأخير طفيف كما هو مذكور

{
"الاسم": "HelloIonic"،
"خاص": "صحيح" ،
"devDependencies": {
"أيوني": "driftyco / ionic-bower # 1.7.12" ، // هنا ، تأكد من تحديثه
"aws-sdk-js": "~ 2.0.9" ،
"التمهيد": "~ 3.2.0"،
"platform.js": "platform # ~ 1.3.1"
}
}

على أي حال ، الفلاش الخفيف موجود فقط على android ، وهو جزء من الثانية فقط.

هل يمكن لأي شخص أن يؤكد أن 1.2.3 "copenhagen" يصلح هذه المشكلة؟

mhartingtonmlynch أستطيع أن أؤكد هذا العقار لا يزال لا يعمل مع النسخة 1.2.3. ألق نظرة على تسلسل لقطات الشاشة هذه.

أبدأ أولاً في علامة التبويب "الفواتير" الخاصة بي على النحو التالي:

ثم أضغط على علامة التبويب "زملائي في الغرفة" وتحدث الخطوات التالية (مما يتسبب في وميض):

1. يعرض التطبيق كلمة "Bills" للعنوان ولكنه يعرض علامة التبويب "Roommates" المخبأة
   
2. يقوم التطبيق بعد ذلك بإزالة كل المحتوى ، لكنه لا يزال يعرض عنوان "الفواتير"
   
3. يعرض التطبيق محتوى "رفقاء الغرفة"
   
4. يتلاشى التطبيق في عنوان "رفقاء الغرفة"
   

مع كل هذه الخطوات مجتمعة ، فإنها تخلق وميضًا بشعًا عند تبديل علامات التبويب.

لمعرفة تأثير الخطأ ، ألق نظرة على هذا الفيديو:
https://dl.dropboxusercontent.com/u/97539058/Bugs/tabs-bug.mp4

مرحبًا ، أدركت أن الخطأ الذي أصابني كان مشكلة في استخدام SQLite في تطبيقي. اسف لخلط الامور.

+1

+1

+1

يبدو أنها مشكلة مع انتهاء المهلة

المشكلة اختفت للتو بالنسبة لي! كانت المشكلة متعلقة بالطريقة التي أنشأت بها علامات التبويب الخاصة بي!
تأكد من إنشائه بطريقة جيدة ، والتنقل داخل علامات التبويب أيضًا. اعتني بالآباء المتحكمين ==> الطفل

لا مزيد من الفلاش الأبيض

@ princefr هل يمكنك أن

بالنسبة لنظام التشغيل iOS ، كان علي استبدال css [ionic.CSS.TRANSITION_DURATION] بـ css.WebkitTransition في السطر 47715 و 47750 من ionic.bundle.js

"// انتقالات iOS
// -----------------------
Provider.transitions.views.ios = الوظيفة (enterEle، leaveEle، direction، shouldAnimate) {

function setStyles(ele, opacity, x, boxShadowOpacity) {
  var css = {};
  css.WebkitTransition = d.shouldAnimate ? '' : 0;
  css.opacity = opacity;
  if (boxShadowOpacity > -1) {
    css.boxShadow = '0 0 10px rgba(0,0,0,' + (d.shouldAnimate ? boxShadowOpacity * 0.45 : 0.3) + ')';
  }
  css[ionic.CSS.TRANSFORM] = 'translate3d(' + x + '%,0,0)';
  ionic.DomUtil.cachedStyles(ele, css);
}

var d = {
  run: function(step) {
    if (direction == 'forward') {
      setStyles(enteringEle, 1, (1 - step) * 99, 1 - step); // starting at 98% prevents a flicker
      setStyles(leavingEle, (1 - 0.1 * step), step * -33, -1);

    } else if (direction == 'back') {
      setStyles(enteringEle, (1 - 0.1 * (1 - step)), (1 - step) * -33, -1);
      setStyles(leavingEle, 1, step * 100, 1 - step);

    } else {
      // swap, enter, exit
      setStyles(enteringEle, 1, 0, -1);
      setStyles(leavingEle, 0, 0, -1);
    }
  },
  shouldAnimate: shouldAnimate && (direction == 'forward' || direction == 'back')
};

return d;

} ؛

Provider.transitions.navBar.ios = function (EnterHeaderBar، leaveHeaderBar، direction، shouldAnimate) {

function setStyles(ctrl, opacity, titleX, backTextX) {
  var css = {};
  css.WebkitTransition = d.shouldAnimate ? '' : '0ms';
  css.opacity = opacity === 1 ? '' : opacity;

  ctrl.setCss('buttons-left', css);
  ctrl.setCss('buttons-right', css);
  ctrl.setCss('back-button', css);

  css[ionic.CSS.TRANSFORM] = 'translate3d(' + backTextX + 'px,0,0)';
  ctrl.setCss('back-text', css);

  css[ionic.CSS.TRANSFORM] = 'translate3d(' + titleX + 'px,0,0)';
  ctrl.setCss('title', css);
}

function enter(ctrlA, ctrlB, step) {
  if (!ctrlA || !ctrlB) return;
  var titleX = (ctrlA.titleTextX() + ctrlA.titleWidth()) * (1 - step);
  var backTextX = (ctrlB && (ctrlB.titleTextX() - ctrlA.backButtonTextLeft()) * (1 - step)) || 0;
  setStyles(ctrlA, step, titleX, backTextX);
}

function leave(ctrlA, ctrlB, step) {
  if (!ctrlA || !ctrlB) return;
  var titleX = (-(ctrlA.titleTextX() - ctrlB.backButtonTextLeft()) - (ctrlA.titleLeftRight())) * step;
  setStyles(ctrlA, 1 - step, titleX, 0);
}

var d = {
  run: function(step) {
    var enteringHeaderCtrl = enteringHeaderBar.controller();
    var leavingHeaderCtrl = leavingHeaderBar && leavingHeaderBar.controller();
    if (d.direction == 'back') {
      leave(enteringHeaderCtrl, leavingHeaderCtrl, 1 - step);
      enter(leavingHeaderCtrl, enteringHeaderCtrl, 1 - step);
    } else {
      enter(enteringHeaderCtrl, leavingHeaderCtrl, step);
      leave(leavingHeaderCtrl, enteringHeaderCtrl, step);
    }
  },
  direction: direction,
  shouldAnimate: shouldAnimate && (direction == 'forward' || direction == 'back')
};

return d;

} ؛ `

يبدو أنه تم إصلاحه بالنسبة لي عندما قمت بتغيير هذا الخط https://github.com/driftyco/ionic/blob/master/js/angular/service/viewSwitcher.js#L142 ليكون:

callback && ionic.requestAnimationFrame(callback);

لست متأكدًا مما إذا كانت طريقة صحيحة لإصلاح ذلك.

هل يحدث هذا في بعض إصدارات iOS أيضًا (تذكر أن التقرير موجود في إصدارات Android)؟

من: عبد الوهاب [mailto: [email protected]]
تاريخ الإرسال: الأربعاء ، 10 فبراير 2016 الساعة 9:59 مساءً
إلى: driftyco / ionic [email protected]
نسخة إلى: David Lloyd [email protected]
الموضوع: Re: خطأ [أيوني]: ظهور وميض أبيض عند التبديل بين علامات التبويب على Android (# 3907)

بالنسبة لنظام التشغيل iOS ، كان علي استبدال css [ionic.CSS.TRANSITION_DURATION] بـ css.WebkitTransition في السطر 47715 و 47750 من ionic.bundle.js

"// انتقالات iOS
// -----------------------
Provider.transitions.views.ios = الوظيفة (enterEle، leaveEle، direction، shouldAnimate) {

وظيفة setStyles (ele، opacity، x، boxShadowOpacity) {
var css = {} ،
css.WebkitTransition = d.shouldAnimate؟ '': 0 ؛
css.opacity = عتامة ؛
إذا (boxShadowOpacity> -1) {
css.boxShadow = '0 0 10px rgba (0،0،0،' + (d.shouldAnimate؟ boxShadowOpacity * 0.45: 0.3) + ')'؛
}
css [ionic.CSS.TRANSFORM] = 'translate3d (' + x + '٪، 0،0)'؛
أيوني.
}

فار د = {
تشغيل: وظيفة (خطوة) {
إذا (direction == 'forward') {
setStyles (enterEle، 1، (1 - step) * 99، 1 - step) ؛ // بدءًا من 98٪ يمنع الوميض
setStyles (ترك إيل ، (1 - 0.1 * خطوة) ، الخطوة * -33 ، -1) ؛

} else if (direction == 'back') {
  setStyles(enteringEle, (1 - 0.1 * (1 - step)), (1 - step) * -33, -1);
  setStyles(leavingEle, 1, step * 100, 1 - step);

} else {
  // swap, enter, exit
  setStyles(enteringEle, 1, 0, -1);
  setStyles(leavingEle, 0, 0, -1);
}

} ،
shouldAnimate: shouldAnimate && (direction == 'forward' || direction == 'back')
} ؛

عودة د ؛

} ؛

Provider.transitions.navBar.ios = function (EnterHeaderBar، leaveHeaderBar، direction، shouldAnimate) {

وظيفة setStyles (ctrl ، opacity ، titleX ، backTextX) {
var css = {} ،
css.WebkitTransition = d.shouldAnimate؟ ':' 0ms '؛
css.opacity = عتامة === 1؟ '': عتامة ؛

ctrl.setCss ("أزرار اليسار" ، css) ؛
ctrl.setCss (أزرار اليمين ، css) ،
ctrl.setCss (زر الرجوع للخلف css) ؛

css [ionic.CSS.TRANSFORM] = 'translate3d (' + backTextX + 'px، 0،0)'؛
ctrl.setCss ("back-text"، css) ؛

css [ionic.CSS.TRANSFORM] = 'translate3d (' + titleX + 'px، 0،0)'؛
ctrl.setCss ('العنوان'، css) ؛
}

وظيفة الإدخال (ctrlA ، ctrlB ، الخطوة) {
إذا كان (! ctrlA ||! ctrlB) يعود ؛
var titleX = (ctrlA.titleTextX () + ctrlA.titleWidth ()) * (1 - خطوة) ؛
var backTextX = (ctrlB && (ctrlB.titleTextX () - ctrlA.backButtonTextLeft ()) * (1 - خطوة)) || 0 ؛
setStyles (ctrlA، step، titleX، backTextX) ؛
}

ترك الوظيفة (ctrlA ، ctrlB ، الخطوة) {
إذا كان (! ctrlA ||! ctrlB) يعود ؛
var titleX = (- (ctrlA.titleTextX () - ctrlB.backButtonTextLeft ()) - (ctrlA.titleLeftRight ())) * خطوة ؛
setStyles (ctrlA، 1 - step، titleX، 0) ؛
}

فار د = {
تشغيل: وظيفة (خطوة) {
var enterHeaderCtrl = EnterHeaderBar.controller () ،
var leaveHeaderCtrl = departureHeaderBar && leaveHeaderBar.controller () ؛
إذا (d.direction == 'back') {
مغادرة (enterHeaderCtrl ، leaveHeaderCtrl ، 1 - خطوة) ؛
أدخل (allowHeaderCtrl، entryHeaderCtrl، 1 - step)؛
} آخر {
أدخل (enterHeaderCtrl ، leaveHeaderCtrl ، الخطوة) ؛
مغادرة (departureHeaderCtrl ، EnterHeaderCtrl ، الخطوة) ؛
}
} ،
الاتجاه: الاتجاه ،
shouldAnimate: shouldAnimate && (direction == 'forward' || direction == 'back')
} ؛

عودة د ؛

} ؛ `

-
قم بالرد على هذه الرسالة الإلكترونية مباشرة أو اعرضها على GitHub https://github.com/driftyco/ionic/issues/3907#issuecomment -182324500. https://github.com/notifications/beacon/ABHsBD1Sp3tXsq8707UTfdVHgqSlxI0zks5pixaSgaJpZM4E82pl.gif

+1
ومضات على الاندرويد ..

1+

+1

الرجال فقط "مخبأ: صحيح" الخاص بك في "الدولة" حتى أن صفحتك تم مؤقتا قبل استخراج وتقديم بسلاسة

@ حريش هنا ماذا عن أول مرة؟

نعم ، ليس من الجيد استخدام ذاكرة التخزين المؤقت: صحيح فقط لهذه الأغراض

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

لا تزال نفس المشكلة هنا تعمل 1.2.4-nightly-1917

+1

princefr - نعم ، يرجى توضيح ماهية الترميز المناسب لعلامات التبويب للتخفيف من هذه المشكلة

princefr من فضلك إذا كان بإمكانك توضيح بنية علامة التبويب

لا تزال هذه مشكلة بالنسبة لي ومحبطة للغاية. هل هناك أي تحرك أو أي قرار مفهوم؟

+1

+1

النظر في هذا الناس غدا! :ابتسامة:

هناك مشكلة متعلقة بنظام iOS سأربطها هنا لاحقًا الليلة. كنت قادرا على توبخ ذلك.

شكرا لكmhartington!

لإضافة المزيد من السياق ، في وضعي وجدت الخطأ موجودًا مع ما يلي:

Index.html
<ion-nav-view></ion-nav-view>

عرض 1.html
<ANY ELEMENT>Something</ANY ELEMENT><ion-nav-view></ion-nav-view>

sub-view-1.html
<ANY></ANY>

ولكن لم يكن موجودًا عند إزالة <ANY ELEMENT> من view-1.html.

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

لقد جربت جميع طرق عرض ui / عرض أيون / عرض ملاحة أيون / علامات تبويب أيون / جزء أيون / إلخ. لم ينجح شيء على الإطلاق.

تصف هذه المشكلة نفس الخطأ ولكن على iOS https://github.com/driftyco/ionic/issues/5888

mhartington هل يمكنك الاختبار باستخدام تطبيق المؤتمر؟ كان كل من أنا و @ براندي قادرين على إعادة عرض بعض الفلاش الطفيف عند التبديل بين علامات التبويب. كان هذا باستخدام المحاكي وليس جهازًا فعليًا.

الخطأ في # 5888 مخصص لـ ionic2 على الرغم من ذلك ، لست متأكدًا من أن قواعد الشفرة متشابهة بما يكفي لتكون نفس الخطأ.

مرحبًا ، شكرًا على التحلي بالصبر في هذا الأمر ، أقدر ذلك حقًا: ابتسم:

بالنظر إلى الأشياء ، يجب أن يؤثر هذا على كل من iOS و Android مع الإصدار الأيوني 1.2.4 ، أليس كذلك؟

أيضًا ، هل تمكن أي شخص من إعادة إنشاء هذا باستخدام تطبيق بدء تشغيل علامات التبويب؟

mhartington إنه https://github.com/driftyco/ionic/pull/4654 ولكن يبدو أن هذا كسر شيئًا آخر ، وبعد ذلك عندما تم إصلاح ذلك ، تم كسر هذا مرة أخرى.

يمكنك مشاهدته في الفيديو الذي نشرته: https://www.youtube.com/watch؟v=_ja8a08iSPE&feature=youtu.be فقط لاحظ أنه بدلاً من ظهور علامة التبويب الجديدة ، يوجد وميض أبيض قصير جدًا (إطار واحد ، إنه سريع جدا).

andreialecu حسنًا ،

https://youtu.be/R5EafRKTst0

نفس المقطع ، فقط تباطأ كثيرا

بالنظر إلى العلاقات العامة ، سوف نرى ما يمكن فعله ويمنعه من كسر أشياء أخرى: ابتسامة:

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

تم إجراء التغييرات على فرع viewFlicker

https://github.com/driftyco/ionic/pull/5937

إذا كنت لا تمانع في سحب الكود ، وبناء Ionic من المصدر ، واختبار التغييرات في تطبيقك ، فيمكننا معرفة ما إذا كان هذا يعمل على إصلاح الأشياء وإزالة هذا الخطأ: shipit:

مذهل. هل هذا ثعلب خاص بنظام Android أم أن نظام iOS سيبدو أيضًا أفضل؟

ctcampbell android ATM. في الاختبارات التي أجريتها ، لم أتمكن من إحداث وميض على نظام iOS

إليك مقطع فيديو سريع يعرض العلاقات العامة

https://youtu.be/nWSuocu64FU

+1

jordantomax هل هذا يعني أن العلاقات العامة تعمل بشكل جيد بالنسبة لك؟ :ابتسامة:

عذرًا ، لا آسف. مجرد الاشتراك في الخلاصة. يمكنني اختبارها على الرغم من ذلك. هل أحتاج إلى تجميع شيء ما لاستخدامه ، أرى أن الإصدار لم يتأثر بالتزامك.

آه

يمكنك اتباع هذه الخطوات.

git clone https://github.com/driftyco/ionic.git
cd ionic 
git checkout viewFlicker
npm install
gulp build

ويجب أن يكون لديك الكود المترجم في dist/js/ionic.bundle.js
يجب أن تكون قادرًا فقط على نسخ / لصق هذا الرمز في مشروع اختبار وتجربته.

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

هل ستتمكن بدلاً من ذلك من إنشاء رمز بسيط أو git repo يمكنني استنساخه واختباره؟
مجرد إعداد مماثل لتطبيقك

فكره جيده. سأحاول أن أفعل ذلك الليلة أو صباح الغد. شكرا لمساعدتك.

mhartington لقد

لقد اختبرت الإصلاح باستخدام بدء تشغيل علامات التبويب على Nexus 6 الذي يعمل بمعاينة Android N ، و Nexus 7 2013 الذي يعمل بنظام 6.0.1 ، و Moto X 2014 الذي يعمل بنظام 5.1 ، و Nexus 7 2013 الذي يعمل 4.4.4 ولم يظهر أي وميض في أي من تلك الأجهزة. مذهل !

jordantomax أي حظ في جمع هذا المثال معًا؟

mhartington آسف ، لقد تم إغراقها بالكامل! آمل أن أعمل عليه يوم الأحد.

mhartington لقد اختبرت هذا للتو على ببنائه ويبدو أنه تم إصلاح Android و iPhone بالرقم 5937.

jordantomax ، هل سنحت لك فرصة لتجميع مثال؟

شكرا،
دان

أهلا،

يعمل هذا الإصلاح بشكل جيد ، ولكن يبدو أن المكون الإضافي لانتقالات الصفحة الأصلية لا يعمل بشكل صحيح ... الانتقالات تقوم بأشياء مجنونة بعد أن أضع هذا الإصلاح. هل تعتقد أنه مرتبط؟

tgensol استخدم المعلمات الافتراضية لهذه المكونات الإضافية ، فهي تعمل بشكل جيد مع هذا الإصلاح!

اهلا جميعا! كما يبدو من خلال الاختبار الذي أجريته وأنتم تختبرون الإصلاح يبدو أنه يعمل ، سأمضي قدمًا وأغلق هذه المشكلة في الوقت الحالي. jordantomax إذا حصلت على فرصة لإجراء هذا الاختبار معًا ، فلا تتردد في النشر وسأعيد فتحه بكل سرور (:. أيضًا يؤد الحل أعلاه إلى حل مشكلتك ، فهل تمانع في فتح مشكلة منفصلة في ساعة الخطأ؟ شكرا لكم جميعا!

مع التغييرات الفاصلة في الريبو الأيوني ، كيف نجمعها ونبنيها

1.x الفرع 1.3.1 . إذا قمت باستنساخ الريبو وخرجت الفرع ، فيجب أن تكون قادرًا على تشغيل gulp build لإنشاء الملفات القابلة للتوزيع. يرجى إعلامي إذا كان لديك أي مشاكل مع هذا.

شكرا،
دان

شكرا. بالفعل تحميل dist يدويًا: د

+1

لقد أصلحت هذا. يحدث هذا فيما يتعلق بتحديث العرض الأيوني للشريط الأيوني: شريط جديد تم إنشاؤه قبل الدخول ويخفي الشريط القديم (الحالي) ويومض. الحل هو تأجيل إخفاء الشريط الحالي إلى ما بعد دخول الحدث. من فضلك اكتب لي إذا كان لديك بعض الأسئلة.

smcreator هل يمكنك مشاركة مقتطفات التعليمات البرمجية؟

ما زلت أعاني من نفس المشكلة .... شكرا لك أي مقتطفات من التعليمات البرمجية

أعتقد أن هذه المشكلة تم إصلاحها في الإصدارات الأيونية الحديثة.

كان لدي نفس المشكلة وكان الرد من princefr هو المفتاح. كان لدي العديد من أشرطة التنقل على وجهات النظر. أثناء إضافة ion-nav-bar فقط في الجزء العلوي من ملف tabs.html قمت بإصلاح المشكلة:

<ion-nav-bar class="my-custom-bar">
  <ion-nav-back-button class="button-clear">
    <i  class="button button-icon ion-android-arrow-back" ng-click="vm.goBack()"></i>
  </ion-nav-back-button>
</ion-nav-bar>

<ion-tabs>
....
</ion-tabs>

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