Appear tag doesn't work out of the box

[jdmg94]

The issue at hand is very simple, you can either setup your environment with CRA or cloning the boilerplate repo, I've tried both with the same results.

Steps to Reproduce

1. initialize a spectacle project (doesn't matter how)

2. delete everything in the deck

3. add a Slide with visible content (Heading, Text, etc)

4. Add an Appear tag below the visible content on the same slide with content to be displayed on navigation

5. Present

Expected Result

The default content is visible, the content under the Appear tag becomes visible upon clicking next or using the arrow keys to progress.

Actual Result

The default content is visible, upon navigating the deck goes to the next slide.

[jevakallio]

Hey! I tried reproducing this with:

npx create-react-app spectacle-666 --scripts-version spectacle-scripts
cd spectacle-666
yarn start

This gives me:

"dependencies": {
  "react": "^16.8.6",
  "react-dom": "^16.8.6",
  "spectacle-scripts": "2.3.0"
},

And replaced presentation.js with this:

// Import React
import React from "react";

// Import Spectacle Core tags
import { Deck, Heading, Appear, Slide, Text } from "spectacle";

// Import theme
import createTheme from "spectacle/lib/themes/default";

// Require CSS
require("normalize.css");

const theme = createTheme(
  {
    primary: "white",
    secondary: "#1F2022",
    tertiary: "#03A9FC",
    quaternary: "#CECECE"
  },
  {
    primary: "Montserrat",
    secondary: "Helvetica"
  }
);

export default class Presentation extends React.Component {
  render() {
    return (
      <Deck
        transition={["zoom", "slide"]}
        transitionDuration={500}
        theme={theme}
      >
        <Slide transition={["zoom"]} bgColor="primary">
          <Heading size={1} fit caps lineHeight={1} textColor="secondary">
            First slide
          </Heading>
          <Appear>
            <Text textColor="tertiary" size={3}>
              Hello there!
            </Text>
          </Appear>
        </Slide>
        <Slide transition={["zoom"]} bgColor="primary">
          <Heading size={1} fit caps lineHeight={1} textColor="secondary">
            Second slide
          </Heading>
        </Slide>
      </Deck>
    );
  }
}

Here's the outcome which seems to work as expected on latest Chrome, Safari and Firefox, using either the on-screen arrow buttons, space bar, or arrow keys for navigation.

Could you please provide more detailed reproduction steps, thanks!

[jevakallio]

Oops! Closed by accident. Reopened! 😬

[alecmce]

I've got this problem, too. I'm wrapping each Slide into a Component (because it kicks off some WebGL under the slide). It looks to me as though this is messing with the Appear tags because the Manager traverses the presentation states up-front. ... but I'm still digging.

[jevakallio]

@alecmce if you have a minimal reproducible example you could share, that would be very useful!

[alecmce]

Yep - this breaks:

// Import React
import React from 'react'

// Import Spectacle Core tags
import { Deck, Heading, Appear, Slide, Text } from 'spectacle'

// Import theme
import createTheme from 'spectacle/lib/themes/default'

// Require CSS
require('normalize.css')

const theme = createTheme(
  {
    primary: 'white',
    secondary: '#1F2022',
    tertiary: '#03A9FC',
    quaternary: '#CECECE'
  },
  {
    primary: 'Montserrat',
    secondary: 'Helvetica'
  }
)

export default class Presentation extends React.Component {
  render() {
    return (
      <Deck transition={['zoom', 'slide']} transitionDuration={500} theme={theme}>
        <Test />
        <Slide transition={['zoom']} bgColor="primary">
          <Heading size={1} fit caps lineHeight={1} textColor="secondary">
            Second slide
          </Heading>
        </Slide>
      </Deck>
    )
  }
}

function Test() {
  return (
    <Slide transition={['zoom']} bgColor="primary">
      <Heading size={1} fit caps lineHeight={1} textColor="secondary">
        First slide
      </Heading>
      <Appear>
        <Text textColor="tertiary" size={3}>
          Hello there!
        </Text>
      </Appear>
    </Slide>
  )
}

[jevakallio]

Can confirm, that does indeed break the <Appear> element behaviour. This is approximately where my Spectacle knowledge ends, so I'll let the core maintainers to pick it up from here 👍

[alecmce]

FWIW for others - I confirmed that if I rewrite such that my custom slide logic goes into a React.Component that

export default class Presentation extends React.Component {
  render() {
    return (
      <Deck
        transition={["zoom", "slide"]}
        transitionDuration={500}
        theme={theme}
      >
        <Slide transition={["zoom"]} bgColor="primary">
         <CustomUI />
          <Heading size={1} fit caps lineHeight={1} textColor="secondary">
            First slide
          </Heading>
          <Appear>
            <Text textColor="tertiary" size={3}>
              Hello there!
            </Text>
          </Appear>
        </Slide>
        <Slide transition={["zoom"]} bgColor="primary">
          <Heading size={1} fit caps lineHeight={1} textColor="secondary">
            Second slide
          </Heading>
        </Slide>
      </Deck>
    );
  }
}

function CustomUI() {
 return ...
}

Then the CustomUI logic gets constructed, mounted etc. at the appropriate time. Just didn't feel like the optimal pattern for me because I don't like the master controller pattern that forcing the inline Slides kind of pushes you to. But, glad to get unblocked.

Thanks for your help, @jevakallio.

[jdmg94]

@jevakallio If anything I think we should consider something like react-spring to enable people to control their own animations through hooks, spectacle could expose the transitions it currently has as hooks to keep the functionality it is offered up front

[ebrillhart]

closing in favor of #678 which addresses the crux of the issue here