مكون ReactJS:FadeIn / FadeOut عند إدخال الماوس / ترك الماوس

Question

لقد قمت بإنشاء مكون بسيط على reactjs (نوع من منتقي القيمة: الغطاس)

الآن، أريد إخفاء الأجزاء العلوية والسفلية من عنصر التحكم (opacity=0) وتحريك ل opacity=1 عندما يقوم المستخدم بتمرير المركزية div (.range-picker-selection) بالماوس.

نظرًا لعدم وجود طريقة يمكنني العمل بها DOM مباشرة من وظائف المكون الخاص بي (reactjs لا يشجع هذا) أعتقد أنني يجب أن أغير الحالة (إلى شيء مثل state.expanded = true) والاعتماد عليه reactjs لتعكس التغيير.

ولكن كيف يمكنني تحقيق تأثير الرسوم المتحركة؟
مع jQuery كنت سأستخدمه element.animate({opacity:0}) ولكن الآن ليس لدي إمكانية الوصول إليها DOM

Answer 1

شيء من هذا القبيل؟

http://plnkr.co/edit/5tLWNTtpsSWBUCgnKwQO?p=preview

لقد قمت بتحديث الحالة للحصول على سمة تم التمرير فوقها وطريقتين للدخول/الخروج بالماوس لتعيين القيمة المرتبطة بعنصر .range-picker-selection في وظيفة التجسيد

<div className="range-picker-selection" onMouseEnter={this.onMouseEnterHandler} onMouseLeave={this.onMouseLeaveHandler}>

  onMouseEnterHandler: function () {
    this.setState({
      hovered: true
    })
  },
  onMouseLeaveHandler: function () {
    this.setState({
      hovered: false
    })  
  },

لقد قمت أيضًا بتحديث وظيفة التجسيد لتعيين العتامة على 0 أو 1 وفقًا للعناصر.

style={{opacity: this.state.hovered ? 1 : 0}}

أخيرًا، يتم تنفيذ الرسوم المتحركة الفعلية باستخدام الرسوم المتحركة CSS

transition: opacity 1s;

آمل أن يساعد هذا