reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-10-31 16:07:45 +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> <html>
<head> <head>
<title>Redux Counter Example</title> <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> </head>
<body> <body>
<div id="root"> <div id="root">

12
src/react/LogMonitorEntry.js
View File

@ -9,6 +9,16 @@ const styles = {
}, },
tree: { tree: {
paddingLeft: 0 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' cursor: (index > 0) ? 'pointer' : 'default'
}; };
return ( return (
<div style={{textDecoration: collapsed ? 'line-through' : 'none'}}> <div style={{ ...styles.animated, ...styles.fadeIn, textDecoration: collapsed ? 'line-through' : 'none'}}>
<LogMonitorEntryAction <LogMonitorEntryAction
theme={this.props.theme} theme={this.props.theme}
collapsed={collapsed} collapsed={collapsed}