From b0949f28d5cf20f6f1b134d15886e6c23819f0a0 Mon Sep 17 00:00:00 2001 From: JP1998 Date: Mon, 15 Apr 2019 13:38:33 +0200 Subject: [PATCH] Create proper animation for the group phase section The appearance and disappearance of the group phase section will now be animated. The animation will have to be adjusted at some point, since currently the height is hardcoded. The reason for the library is, that react-bootstrap doesn't support animations anymore as of https://github.com/react-bootstrap/react-overlays/issues/146#issuecomment-282036734 --- package.json | 1 + pages/create.js | 17 +++++-- yarn.lock | 116 +++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 130 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index ae3ad3d..1d7d4fe 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "react-dom": "^16.6.1", "react-favicon": "^0.0.14", "react-notify-toast": "^0.5.0", + "react-pose": "^4.0.8", "react-redux": "^5.1.1", "reactstrap": "^6.5.0", "redux": "^4.0.1", diff --git a/pages/create.js b/pages/create.js index 895eaee..8a3de6d 100644 --- a/pages/create.js +++ b/pages/create.js @@ -1,6 +1,7 @@ import Head from 'next/head'; import React from 'react'; import { connect } from 'react-redux'; +import posed from 'react-pose'; import { Button, @@ -88,6 +89,17 @@ function CreateTournamentCard() { ); } +const GroupphaseFader = posed.div({ + visible: { + opacity: 1, + height: 150 + }, + hidden: { + opacity: 0, + height: 0 + } +}); + class CreateTournamentForm extends React.Component { constructor(props) { super(props); @@ -118,8 +130,7 @@ class CreateTournamentForm extends React.Component { - + @@ -129,7 +140,7 @@ class CreateTournamentForm extends React.Component { weiterkommen? - +

Teams