reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2024-11-25 02:53:53 +03:00
Code Issues Packages Projects Releases Wiki Activity

lightweight css animations for new actions entering the log.

Browse Source
This commit is contained in:
Sunil Pai 2015-08-12 23:42:41 +05:30
parent 1eeda8073a
commit ff00269968
2 changed files with 23 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
examples/counter/index.html
View File

@ -1,6 +1,18 @@
<html>
<head>
<title>Redux Counter Example</title>
<style>
/* unsure how to represent this in js, so it stays here for now */
@-webkit-keyframes fadeIn {
from { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fadeIn {
from { opacity: 0; }
100% { opacity: 1; }
}
</style>
</head>
<body>
<div id="root">

12
src/react/LogMonitorEntry.js
View File

@ -9,6 +9,16 @@ const styles = {
},
tree: {
paddingLeft: 0
},
animated: {
WebkitAnimationDuration: '0.2s',
animationDuration: '0.2s',
WebkitAnimationFillMode: 'both',
animationFillMode: 'both'
},
fadeIn: {
WebkitAnimationName: 'fadeIn',
animationName: 'fadeIn'
}
};
@ -64,7 +74,7 @@ export default class LogMonitorEntry {
cursor: (index > 0) ? 'pointer' : 'default'
};
return (
<div style={{textDecoration: collapsed ? 'line-through' : 'none'}}>
<div style={{ ...styles.animated, ...styles.fadeIn, textDecoration: collapsed ? 'line-through' : 'none'}}>
<LogMonitorEntryAction
theme={this.props.theme}
collapsed={collapsed}