https://github.com/queeniecplusplus/react_css
assign style add-on to component
https://github.com/queeniecplusplus/react_css
css es5-javascript html5 react
Last synced: 4 months ago
JSON representation
assign style add-on to component
- Host: GitHub
- URL: https://github.com/queeniecplusplus/react_css
- Owner: QueenieCplusplus
- Created: 2020-07-12T02:15:39.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-07-12T02:42:58.000Z (over 5 years ago)
- Last Synced: 2025-06-09T04:40:09.551Z (9 months ago)
- Topics: css, es5-javascript, html5, react
- Language: JavaScript
- Homepage: https://github.com/QueenieCplusplus/React_css
- Size: 8.79 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React_css
assign style add-on to component
# add-ons Component
// CSS transition 轉場 (為類別指定合適的 CSS 樣式)
// 使用 此 addons 附加元件
// 加入附加元件
var React = require("react");
var ReactCSSTransitionGroup = React.addons.ReactCSSTransitionGroup;
// html
{qustionIssued}
# transition group Life Cycle
轉場組生命週期
// 馬上生效
.qStyle-enter{
}
// 選中時生效
.qStyle-enter-active{
}
// 自動離開
.qStyle-leave{
}
// 離開時生效
.qStyle-leave-active{
}
# CSS transition group
樣式轉場組的使用叮嚀：
因為此附加元件會延遲其子元件的移除，直到動畫結束為止。所以倘若沒有為此附加元件的 transitionName 屬性指定 CSS，
則這些附加元件無法移除。
另外，此附加元件的子元件都各自字有一唯一的 k/v 屬性集，轉場組使用這些值判斷附加元件何時進場出場該組，
倘若沒有正確的主建屬性，動畫會失敗，且這附加元件也無法移除。
所以即便轉場組只有一子元件如進場，其進場內的主建屬性也需要具備清楚。
.qStyle-enter{
// 彈出的視覺效果
// 主建屬性集必須齊全
transform: scale(1.2); // 放大倍數
transition: transform 0.2s // 過程歷經時間
}
.qStyle-enter-active{
// 主建屬性集必須齊全
transform:
}
.qStyle-leave{
// 主建屬性集必須齊全
transform:
opacity: 0;
}
.qStyle-leave-active{
// 主建屬性集必須齊全
}
＊ 範例
https://github.com/QueenieCplusplus/React_email