diff options
-rw-r--r-- | src/client/views/SearchBox.tsx | 74 |
1 files changed, 45 insertions, 29 deletions
diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx index 3aaf3decb..7d2d8e547 100644 --- a/src/client/views/SearchBox.tsx +++ b/src/client/views/SearchBox.tsx @@ -45,12 +45,14 @@ export interface ToggleBarProps { export class ToggleBar extends React.Component<ToggleBarProps>{ @observable _status: boolean = false; - @observable timeline: any; + @observable timeline: anime.AnimeTimelineInstance; @observable _toggleButton: React.RefObject<HTMLDivElement>; constructor(props: ToggleBarProps) { super(props); this._toggleButton = React.createRef(); + this.timeline = anime.timeline({autoplay: false, + direction: "reverse"}); } componentDidMount = () => { @@ -65,48 +67,62 @@ export class ToggleBar extends React.Component<ToggleBarProps>{ } let totalWidth = (barwidth - togwidth - 10); - this.timeline = anime.timeline({ - autoplay: false, - loop: false, - direction: "normal" - }); + // this.timeline = anime.timeline({ + // autoplay: false, + // loop: false, + // direction: "normal", + // complete:(anim: anime.AnimeInstance) => { + // anim.pause(); + // console.log("finished!") + // } + // }); + + // let test = anime({ + // targets: "", + // opacity: 1 + // }) this.timeline.add({ targets: this._toggleButton.current, + // autoplay: false, + loop: false, + // direction: "normal", translateX: totalWidth, easing: "easeInOutQuad", }); } - + @action.bound onclick() { console.log("clicked") this._status = !this._status; - if(this._status){ - console.log("playing normally") - this.timeline.play() - } - else{ - console.log("playing reverse") - this.timeline.play(); - this.timeline.reverse(); - this.timeline.pause(); - } + this.timeline.play(); + this.timeline.reverse(); + // if(this._status){ + // console.log("playing normally") + // this.timeline.play() + // } + // else{ + // console.log("playing reverse") + // this.timeline.reverse(); + // // this.timeline.pause() + // // this.timeline.pause(); + // } } - @action.bound - toggle = (animation: any, open: boolean) => { - if(open){ - animation.play(); - if(animation.reversed) { - animation.reverse(); - } - } else{ - animation.play(); - - } - } + // @action.bound + // toggle = (animation: any, open: boolean) => { + // if(open){ + // animation.play(); + // if(animation.reversed) { + // animation.reverse(); + // } + // } else{ + // animation.play(); + + // } + // } render() { return ( |