page-transitions | css3 page-transitions preview | Animation library

I want to code to achieve such an effect： Advanced fade transition (with height)

I follow the nuxt document add the transition in layouts/default.vue

css3 seems to have transition and data-transition.

I want to use the effects from here, but I'm not quite sure how to get them to work. I'm coming from css2 and html4 and these things are new to me. Having read and searched for a few hours already, I'm rather at a loss.

I've tried putting data-transition: turn; in my css for an element, and I've tried putting it in the html as link.

I am trying to configure my Gatsby project like this starter https://github.com/gatsbyjs/gatsby-starter-blog

In my gatsby-node.js I have

I have an issue with angularfire2 and ionic 3. Based on the documentation https://github.com/angular/angularfire2/blob/master/docs/ionic/v3.md implemented the fetching of data from firebase and its working very good in ionic serve.

When I took the production build ionic cordova build android --prod, Terminal stop execution at copy finished and after an hour it alerting that the Javascript out of memory.

I removed the angularfire2 package from package.json and try to take production build after npm install, it working without any issues.

In order to translate my site I'm injecting intl like this in my layout.js file:

I am using React Context in order to manage a global state.

So I have defined my Context with its Provider and its Consumer.

I have my videoplaying-context.js

I want page contents in my application to transition smoothly. I have been attempting to do this using react-transition-group but I have struggled to achieve the correct implementation. The following link was informative: https://coursework.vschool.io/react-transitions-with-react-transition-group/

It shows how to make modularize and use TransitionGroup (although not both at the same time, unfortunately).

I created a demo project (based on the above link) to troubleshoot this issue. I have two items in an array ‘contactComponents’. All I am trying to do at the moment is make this information appear and disappear using the show/hide button.

Here is the main body of the code:

I want to show the Prev and Next link under every single post. I followed below tutorial and incorporated in my project, my website structure is different from the one in the tutorial.

https://egghead.io/lessons/gatsby-add-next-and-previous-links-to-a-gatsby-blog

Here is my gatsby-node.js file: https://prnt.sc/qmdmhi and my post.js file: https://prnt.sc/qmdmdh

After incorporating this code, the posts are not created and can not see the links.

POST.JS

when i ran this command

ionic cordova run android --livereload --consolelogs --emulator

i found this error

[ng] Schema validation failed with the following errors: [ng] Data path ".builders['cordova-build']" should have required property 'class'.[ERROR] ng has unexpectedly closed (exit code 1). The Ionic CLI will exit. Please check any output above for error details.

my package.json