diff options
| author | madelinegr <monika_hedman@brown.edu> | 2019-06-07 12:03:52 -0400 |
|---|---|---|
| committer | madelinegr <monika_hedman@brown.edu> | 2019-06-07 12:03:52 -0400 |
| commit | 1c9196d9c6c8051d2f7c59538265693f8ad3d98c (patch) | |
| tree | 0325d722d4fb07a71da958b6bc665bab9e78c8f7 | |
| parent | 9f8dba3472bb1acb289bcdf1e0da04a54d93a640 (diff) | |
animation starting to work
| -rw-r--r-- | deploy/index.html | 2 | ||||
| -rw-r--r-- | src/client/views/SearchBox.tsx | 127 |
2 files changed, 72 insertions, 57 deletions
diff --git a/deploy/index.html b/deploy/index.html index 92635e7f5..f4a019b71 100644 --- a/deploy/index.html +++ b/deploy/index.html @@ -6,7 +6,7 @@ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/3.3.1/typescript.min.js"></script> - <script src="anime.min.js"></script> + <script src="https://rawgithub.com/juliangarnier/anime/master/anime.min.js"></script> </head> <body> diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx index d05c06549..3e8d6c58c 100644 --- a/src/client/views/SearchBox.tsx +++ b/src/client/views/SearchBox.tsx @@ -20,7 +20,7 @@ import * as anime from 'animejs'; // const anime = require('lib/anime.js'); // import anime from 'animejs/lib/anime.es'; // import anime = require ('lib/anime.min.js'); -import Anime from 'react-anime'; +// import Anime from 'react-anime'; library.add(faSearch); library.add(faObjectGroup); @@ -45,72 +45,87 @@ export interface ToggleBarProps { export class ToggleBar extends React.Component<ToggleBarProps>{ @observable _status: boolean = false; + @observable timeline: any; - // @observable clicked: boolean = true; + _toggleButton: React.RefObject<HTMLDivElement>; - @action.bound - toggle() { - this._status = !this._status; - } + constructor(props: ToggleBarProps) { + super(props); + this._toggleButton = React.createRef(); - render() { - var timeline = anime.timeline({ - autoplay:false - }) - - timeline.add({ - targets: '.toggle-button', - translateX: '100%', - direction: 'alternate', - easing: 'easeInOutQuad' - }); + // this.timeline = anime.timeline({ + // autoplay: true, + // direction: 'alternate', + // loop: true + // }) - // var wordQueryToggle = anime({ + // this.timeline.add({ // targets: '.toggle-button', // translateX: '100%', // direction: 'alternate', // easing: 'easeInOutQuad' // }); - // document.querySelector('.toggle-button').onClick = wordQueryToggle; + // if (this.) + // this._toggleButton.current.animate({ + // translate: {x: 100, y: 0}, + // duration: 1000 + // }) + } + + componentDidMount = () => { + + let bar = document.getElementById("toggle-bar"); + let tog = document.getElementById("toggle-button"); + let padding = 0; + let barwidth = 0; + let togwidth = 0; + if (bar && tog) { + barwidth = bar.clientWidth; + togwidth = tog.clientWidth; + } + let totalWidth = (barwidth - togwidth - 10); + + let timeline = anime.timeline({ + autoplay: true, + loop: true, + direction: 'alternate', + }); + + timeline.add({ + targets: this._toggleButton.current, + translateX: totalWidth, + easing: "easeInOutQuad", + }); + + timeline.play(); + + // const animeObject = anime({ + // targets: this._toggleButton.current, + // translateX: totalWidth, + // direction: 'alternate', + // easing: 'easeInOutQuad', + // autoplay: false, + // duration: .5, + // }) + } + + @action.bound + toggle() { + this._status = !this._status; + } + + @action.bound + onclick() { + console.log("clicked") + // this.timeline.play(); + + } + + render() { return ( - <div className="toggle-bar"> - {/* <div className = "toggle-button" onClick = {() => timeline.play()}> */} - {/* <div className = "toggle-button"> */} - {/* {this._status ? ( - <Anime - loop={false} - autoplay={false} - translateX="100%" - direction="alternate" - easing="easeInOutQuad" - > - <div className="toggle-button" onClick = {this.toggle} /> - </Anime> - ) : ( - <Anime - loop={false} - autoplay={true} - translateX="100%" - direction="alternate" - easing="easeInOutQuad" - > - <div className="toggle-button" onClick = {this.toggle} /> - </Anime> - )} */} - -{/* - - <Anime - loop={false} - autoplay={false} - translateX="100%" - direction="alternate" - easing="easeInOutQuad" - > - <div className="toggle-button" onClick = {this.toggle} /> - </Anime> */} - {/* </div> */} + <div className="toggle-bar" id="toggle-bar"> + <div className="toggle-button" id="toggle-button" ref={this._toggleButton} onClick={this.onclick} /> </div> ); }; |