مكون ReactJS:FadeIn / FadeOut عند إدخال الماوس / ترك الماوس
-
21-12-2019 - |
سؤال
لقد قمت بإنشاء مكون بسيط على reactjs
(نوع من منتقي القيمة: الغطاس)
الآن، أريد إخفاء الأجزاء العلوية والسفلية من عنصر التحكم (opacity=0
) وتحريك ل opacity=1
عندما يقوم المستخدم بتمرير المركزية div
(.range-picker-selection
) بالماوس.
نظرًا لعدم وجود طريقة يمكنني العمل بها DOM
مباشرة من وظائف المكون الخاص بي (reactjs
لا يشجع هذا) أعتقد أنني يجب أن أغير الحالة (إلى شيء مثل state.expanded = true
) والاعتماد عليه reactjs
لتعكس التغيير.
ولكن كيف يمكنني تحقيق تأثير الرسوم المتحركة؟
مع jQuery كنت سأستخدمه element.animate({opacity:0})
ولكن الآن ليس لدي إمكانية الوصول إليها DOM
المحلول
شيء من هذا القبيل؟
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;
آمل أن يساعد هذا