mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 05:05:48 +08:00
Merge from master
This commit is contained in:
afc163
commit
2c8eabf99b
@ -93,6 +93,7 @@
|
||||
"extract-text-webpack-plugin": "^0.9.1",
|
||||
"gh-pages": "^0.8.0",
|
||||
"history": "^1.17.0",
|
||||
"instantclick": "^3.1.0",
|
||||
"jest-cli": "~0.8.0",
|
||||
"json-loader": "^0.5.1",
|
||||
"less": "~2.5.3",
|
||||
@ -102,7 +103,7 @@
|
||||
"nico-jsx": "~0.7.0",
|
||||
"pre-commit": "1.x",
|
||||
"rc-form": "^0.8.0",
|
||||
"rc-scroll-anim": "^0.1.0",
|
||||
"rc-scroll-anim": "^0.1.1",
|
||||
"rc-tween-one": "^0.1.8",
|
||||
"react": "0.14.x",
|
||||
"react-addons-test-utils": "0.14.x",
|
||||
@ -112,6 +113,7 @@
|
||||
"react-stateless-wrapper": "~1.0.2",
|
||||
"reqwest": "~2.0.5",
|
||||
"semver": "^5.1.0",
|
||||
"values.js": "^1.0.3",
|
||||
"webpack": "^1.10.1",
|
||||
"webpack-babel-jest": "^1.0.0",
|
||||
"webpack-dev-middleware": "^1.2.0"
|
||||
|
||||
@ -37,6 +37,9 @@ window.ReactDOM = ReactDOM;
|
||||
window['object-assign'] = require('object-assign');
|
||||
window['classnames'] = require('classnames');
|
||||
window['reqwest'] = require('reqwest');
|
||||
window['Values'] = require('values.js');
|
||||
var InstantClick = require('instantclick');
|
||||
window['InstantClick'] = InstantClick;
|
||||
require('./home')();
|
||||
|
||||
antd.DatePicker.locale = {
|
||||
|
||||
@ -2,6 +2,8 @@ const React = require('react');
|
||||
const ReactDOM = require('react-dom');
|
||||
import { QueueAnim, Icon, Button } from '../index';
|
||||
import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack';
|
||||
import ScrollLink from 'rc-scroll-anim/lib/ScrollLink';
|
||||
import ScrollElement from 'rc-scroll-anim/lib/ScrollElement';
|
||||
import TweenOne from 'rc-tween-one';
|
||||
|
||||
module.exports = function() {
|
||||
@ -23,6 +25,19 @@ module.exports = function() {
|
||||
$(window).off('scroll.scrollNavEvent');
|
||||
$(window).on('scroll.scrollNavEvent', scrollNavEvent);
|
||||
|
||||
// list point
|
||||
ReactDOM.render((
|
||||
<div>
|
||||
<ScrollLink className="list-point" location="banner" showHeightActive="50%"/>
|
||||
<ScrollLink className="list-point" location="page1" showHeightActive="50%"/>
|
||||
<ScrollLink className="list-point" location="page2" showHeightActive="50%"/>
|
||||
<ScrollLink className="list-point" location="page3" showHeightActive="50%"/>
|
||||
<ScrollLink className="list-point" location="page4" showHeightActive="50%"/>
|
||||
</div>
|
||||
), document.getElementById('list'));
|
||||
|
||||
// banner
|
||||
|
||||
class Banner extends React.Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
@ -39,7 +54,7 @@ module.exports = function() {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<ScrollElement scrollName="banner" style={{height: '100%'}}>
|
||||
<QueueAnim className="banner-text-wrapper" type={this.typeFunc} delay={300}>
|
||||
<h2 key="h2">ANT <p>DESIGN</p></h2>
|
||||
<p key="content">一个 UI 设计语言</p>
|
||||
@ -49,7 +64,7 @@ module.exports = function() {
|
||||
<TweenOne className='down' vars={[{opacity: 1},{y: 10, duration: 800, yoyo: true, repeat: -1}]}>
|
||||
<Icon type="down"/>
|
||||
</TweenOne>
|
||||
</div>
|
||||
</ScrollElement>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -58,7 +73,7 @@ module.exports = function() {
|
||||
|
||||
// page1
|
||||
ReactDOM.render((
|
||||
<ScrollOverPack className="content-wrapper">
|
||||
<ScrollOverPack scrollName="page1" className="content-wrapper" playScale={0.4}>
|
||||
<TweenOne key="image" className="image1 image-wrapper" vars={{x: 0, opacity: 1, duration: 550}}
|
||||
style={{transform: 'translateX(-100px)', opacity: 0}} scrollHideProps={{type: 'reverse'}}/>
|
||||
<QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse
|
||||
@ -74,7 +89,7 @@ module.exports = function() {
|
||||
|
||||
//page2
|
||||
ReactDOM.render((
|
||||
<ScrollOverPack className="content-wrapper">
|
||||
<ScrollOverPack scrollName="page2" className="content-wrapper" playScale={0.4}>
|
||||
<QueueAnim className="text-wrapper left-text" delay={300} key="text" duration={550} type='bottom' leaveReverse
|
||||
scrollHideProps={{child: null}}>
|
||||
<h2 key="h2">设计模式</h2>
|
||||
@ -91,7 +106,7 @@ module.exports = function() {
|
||||
|
||||
// page3
|
||||
ReactDOM.render((
|
||||
<ScrollOverPack className="content-wrapper">
|
||||
<ScrollOverPack scrollName="page3" className="content-wrapper" playScale={0.4}>
|
||||
<TweenOne key="image" className="image3 image-wrapper" vars={{x: 0, opacity: 1, duration: 550}}
|
||||
style={{transform: 'translateX(-100px)', opacity: 0}} scrollHideProps={{type: 'reverse'}}/>
|
||||
<QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse style={{top: '40%'}}
|
||||
@ -107,7 +122,7 @@ module.exports = function() {
|
||||
|
||||
// page4
|
||||
ReactDOM.render((
|
||||
<ScrollOverPack className="content-wrapper">
|
||||
<ScrollOverPack scrollName="page4" className="content-wrapper" playScale={0.4}>
|
||||
<QueueAnim className="text-wrapper-bottom" delay={300} key="text" duration={550} leaveReverse type="bottom"
|
||||
scrollHideProps={{child: null}}>
|
||||
<h2 key="h2">微小·确定·幸福</h2>
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
|
||||
{% block content %}
|
||||
<link href="http://fonts.useso.com/css?family=Raleway:600,500,400,300" rel="stylesheet" type="text/css">
|
||||
<div id="list"></div>
|
||||
<section id="banner"></section>
|
||||
<section id="page1" class="page"></section>
|
||||
<section id="page2" class="page"></section>
|
||||
@ -95,10 +96,10 @@
|
||||
height: 76px;
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, .44);
|
||||
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.03), rgba(255,255,255,0.6), rgba(255,255,255,0.03));
|
||||
background-image: -moz-linear-gradient(top, rgba(255,255,255,0.03), rgba(255,255,255,0.6), rgba(255,255,255,0.03));
|
||||
background-image: -ms-linear-gradient(top, rgba(255,255,255,0.03), rgba(255,255,255,0.6), rgba(255,255,255,0.03));
|
||||
background-image: -o-linear-gradient(top, rgba(255,255,255,0.03), rgba(255,255,255,0.6), rgba(255,255,255,0.03));
|
||||
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.03));
|
||||
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.03));
|
||||
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.03));
|
||||
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.03));
|
||||
top: 16px;
|
||||
right: -25px;
|
||||
}
|
||||
@ -246,5 +247,30 @@
|
||||
footer ul li > a {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
#list {
|
||||
position: fixed;
|
||||
z-index: 9998;
|
||||
top: 50%;
|
||||
right: 20px;
|
||||
width: 6px;
|
||||
margin-top: -35px;
|
||||
}
|
||||
|
||||
.list-point {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #00AAEE;
|
||||
border-radius: 6px;
|
||||
float: left;
|
||||
margin: 4px auto;
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
transition: opacity .3s;
|
||||
}
|
||||
|
||||
.list-point:hover, .list-point.active {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
@ -18,8 +18,7 @@
|
||||
<!--[if IE 8]>
|
||||
<script src="https://t.alipayobjects.com/images/rmsweb/T1q8JiXftaXXXXXXXX.js"></script>
|
||||
<![endif]-->
|
||||
<script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.1.14/es5-shim.min.js,es5-shim/4.1.14/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
|
||||
<script src="https://a.alipayobjects.com/??bluebird/2.9.30/bluebird.js,jquery/jquery/1.11.1/jquery.js"></script>
|
||||
<script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.1.14/es5-shim.min.js,es5-shim/4.1.14/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js,jquery/1.11.3/jquery.min.js,bluebird/3.1.1/bluebird.min.js"></script>
|
||||
<script>
|
||||
(function() {
|
||||
window.ANT_COMPONENTS = [];
|
||||
@ -45,7 +44,6 @@
|
||||
};
|
||||
</script>
|
||||
<script src="{{static_url('../dist/demo.js')}}?20160114"></script>
|
||||
<script src="https://t.alipayobjects.com/images/T1DrxhXe0mXXXXXXXX.js"></script>
|
||||
{% block scripts %}{% endblock %}
|
||||
</head>
|
||||
<body {% block bodyAttribute %}{% endblock %}>
|
||||
@ -86,7 +84,6 @@
|
||||
{% block aside %}{% endblock %} {% block content %}{% endblock %}
|
||||
</div>
|
||||
{%- include "footer.html" %}
|
||||
<script src="https://t.alipayobjects.com/images/rmsweb/T1AmXhXg0kXXXXXXXX.js" data-no-instant></script>
|
||||
<script data-no-instant>
|
||||
InstantClick.on('change', function() {
|
||||
InstantClickChangeFns.forEach(function(fn) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user