I'm trying to create a catalogue which has a filter component. Once the filter button is clicked, it triggers a variable to turn true which then switches what is being shown on the screen. I want to know how I can make this switch smooth and ease in using css. Here is my code:
<div>
{this.state.showProjects === true &&
<div className="test">
{this.state.projects && this.state.projects.map((project) => (
<ProjectDetails key={project._id} project={project}/>
))}
</div>
}
{this.state.showProjects === false &&
<div className="initial-screen">
Enter filter options to get started!
</div>
}
</div>
Where and how should I incorporate the css ease property?
If I'm understanding what your ask is, you can implement a class-based solution that has your transition effects in there.
<div>
<div className=`test content ${this.state.showProjects && 'active'}`>
{this.state.projects && this.state.projects.map((project) => (
<ProjectDetails key={project._id} project={project}/>
))}
</div>
<div className=`initial-screen content ${!this.state.showProjects && 'active'}`>
Enter filter options to get started!
</div>
</div>
I added another class called content which would have the main transition styling that you would need for your animations. The active class would be your identifier as to what is currently being displayed.
.content {
opacity: 0;
transition-duraction: 2s;
transition-timing-function: ease;
&.active {
opacity: 100;
}
}
This would just add a simple fade-in/fade-out, but you can use this at a simple template for you to use to start adding in more styling; like movement.
Related
In my React project I have a collapsed sidebar menu with a logo at the top. I would like to add functionality that on hovering over the collapsed sidebar, transforms the logo to a basic hamburger menu, and then reverts back to the logo when the mouse leaves the sidebar.
I have access to a designer that could create an animated asset (e.g. GIF), but I am not sure how I would implement something like this with a GIF.
In my limited experience with animating in web projects, I feel that it would be ideal to somehow be able to use CSS animation to make the transformation but don't have the skills to make that myself and I don't think that is something that the designer can do.
I would love to make this logo: https://i.stack.imgur.com/Bsqx9.png
Transform to a basic hamburger icon: https://i.stack.imgur.com/ivRYk.png
Would this be possible to implement in React with a GIF? Other animation formats?
If CSS would be best how could I go about creating the logo in CSS?
Edit: To clarify, I'm hoping to find a way to create a smooth transition between the two. This is why I'm particularly interested in things like CSS animations
Try this code with an Icon instead of a div. I'll add the codesandbox so you can try it out.
Updated Answer
Code with hover to allow tranisitions. With some tweaking you can fade in the Icon using css.
export default function App() {
const [isHovered, setIsHovered] = useState(false);
return (
<div className="App">
<div
className={`${isHovered ? "show" : "hide"}`}
onMouseOver={() => setIsHovered(false)}
>
Hover over me.
</div>
<div
className={`${isHovered ? "hide" : "show"}`}
onMouseOut={() => setIsHovered(true)}
>
I am shown when someone hovers over the div above.
</div>
</div>
);
}
css:
.hide {
display: none;
}
.show {
display: block;
background-color: red;
opacity: 0.6;
transition: 0.3s;
}
.show:hover {
transition: 0.3s;
opacity: 1;
-webkit-transition: all 500ms ease-in;
-moz-transition: all 500ms ease-in;
-ms-transition: all 500ms ease-in;
-o-transition: all 500ms ease-in;
transition: all 500ms ease-in;
}
Updated sandbox
https://codesandbox.io/s/blazing-night-yii1zx?file=/src/styles.css:58-410
Old Answer
export default function App() {
const [isHovered, setIsHovered] = useState(false);
return (
<div>
{isHovered ? (
<h1 onMouseOut={() => setIsHovered(false)}>Hover true</h1>
) : (
<h1 onMouseOver={() => setIsHovered(true)}>Hover false</h1>
)}
</div>
);
}
Old sandbox
The codesandbox: https://codesandbox.io/s/dank-water-mbtwfw?file=/src/App.js:176-579
anyone please can help me figure it out how to make the 2 animations used in this website https://worldofwomen.art/ using react and tailwind css
First: the animated bar of this picture
second: the animated text : • NEW SITE LAUNCHING SOON
I am looking forward for the help from someone, i really passed the whole night searching of animation in react and tailwind css but i didn't find any tutorial about this.
Thank you so much for the help and the stop you put on my question
You can achieve the animation with just css (ie Tailwindcss) by using 'animation' css property
I- Create a nextjs project with the command: $npx create-next-app my-app
II- Setup tailwindcss with nextjs project: https://tailwindcss.com/docs/guides/nextjs
III- Create new React component animation.js, inside pages/ folder
import React from 'react'
export default function Animation2() {
return (
<>
{/* Image Animation */}
<div className="animate">
<img src="/frise-2.2f579f.png" alt="" />
<img src="/frise-2.2f579f.png" alt="" />
</div>
{/* Image Animation - Reversed direction */}
<div className="animate-reversed">
<img src="/frise-2.2f579f.png" alt="" />
<img src="/frise-2.2f579f.png" alt="" />
</div>
{/* Text Animation */}
<div className="bg-[#332970] w-screen box-border p-4 flex items-center overflow-hidden fixed bottom-0">
<div className="animate">
{
[0,1,2,3,4,5,6,7,8,9,10,11].map((i) => (
<div className="text-[#139bac] whitespace-nowrap inline-flex items-center justify-center">• NEW SITE LAUNCHING SOON </div>
))
}
</div>
</div>
</>
);
}
The first div responsible for the animation of the image with the default direction from right to left. I used 2 img tags because it has to have 2 separate sets of the same img tag. because with the infinite loop, when one image disappears the second one appears and it will restart the loop without any gap (You can comment the second img tag to check the gap am talking about)
the second div is similar to the first one but it has the reversed direction property.
For the text animation, we do the same thing we have to create the text multiple times to avoid the gap when we animate the text for an infinite loop. And to avoid multiple lines of the same tag: • NEW SITE LAUNCHING SOON I wrapped in an array and loop through it
all the styles are integrated in the same component using tailwindcss except the animation that will be added in globals.css file like this:
Go to globals.css file and add the animation css code:
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer components {
.animate{
display: flex;
animation: scroll 20s linear infinite;
}
.animate:hover{
animation-play-state: paused;
}
.animate-reversed{
display: flex;
animation: scroll 20s linear infinite;
animation-direction: reverse;
}
.animate-reversed:hover{
animation-play-state: paused;
}
#keyframes scroll {
0%{
transform: translateX(0);
}
100%{
transform: translate(-50%);
}
}
}
There are a few ways to do this, but taking into account the site you referenced, I noticed that it works with an infinite increment, so it's most likely done with JS.
PS.: I could do everything with javascript.
const sleed1 = document.getElementById("sleed1");
let position1 = 0;
setInterval(() => {
position1 = position1 + 10;
sleed1.style.backgroundPosition = position1 + 'px';
sleed1.style.transitionDuration = '100ms';
}, 40)
#sleed1 {
width: 100%;
height: 200px;
background-color: #ccc;
background-image: url("https://i.stack.imgur.com/zJXIx.png");
}
<div id="sleed1" />
To control the speed you can change 3 values:
Number of pixels increased, I put 10.
The duration of the transition, I put '100ms'.
The setInterval interval, I put 40.
Both will influence speed but in different ways, so adjust until you find the best solution for you.
To change the sleed side, change "position + n" to "position-n".
Same code in React. Using "useEffect" with ",[ ]". Important not to forget this for the code to run only once and avoid undesirable effects.
https://codesandbox.io/s/slide-image-animation-with-react-and-css-rfhvd?file=/src/App.js
I've currently got a modal set up, where once it's pressed, it opens a component of mine up. However, this component has a fixed css (which I want to keep), but when the modal is pressed, I want that CSS to change. Is this possible ? I've looked at a few things but can't seem to find something that works. What I've got currently can be seen below, and it doesn't override the original css.
const [currentModal, openModal] = useState(null);
const [appState, changeChange] = useState({
activeObject: null,
objects: [{id: 1}]
in the return
<div className="modal">
{currentModal === 'modal1' ?
<MyComponent>
</MyComponent>
: null}
<div class="class1">
{appState.objects.map((elements,index) => (
<button key={index} classnName="box active"
onClick={() => openModal('modal1')}>
<Modal1></Modal1>
</button>
))}
</div>
The CSS
.box{
width:200px;
height:200px;
margin:10px;
transition: background-color 0.1s ease-in-out;
}
.inactive{
background-color:pink;
}
.active {
background-color: blue;
width:200px;
height:200px;
margin:10px;
}
Use styled components: https://styled-components.com/docs/basics#adapting-based-on-props
Just pass a prop to the styled component wrapping your model. this prop will indicate if the modal has been pressed or not.
You'll have to change the css according to the prop value.
Our team has created a widget in ServiceNow that shows a row of icons and show/hide additional details in a div when icons are clicked. This is what our html and client controller looks like:
<div class="icons">
<ul class="flex justify-content-center align-items-center">
<li ng-repeat="item in c.data.linksArray track by $index">
<a class="link" href="javascript:void(0)" ng-click="c.getInfo(item)">
<i title="{{item.titles}}" class='fa {{item.icon}} fa-3x circle-icon'></i>
</a>
</li>
</ul>
</div>
<div class="linkList text-center"
ng-repeat="thing in c.data.linksArray track by $index"
ng-if="thing.isVisible==true">
<ul>
<li class="m-b-sm" ng-repeat="link in thing.links">
{{link.link_title}}
</li>
</ul>
</div>
function($scope) {
/* widget controller */
var c = this;
c.getInfo = function(item) {
var isDisplaying = false;
if(item.isVisible== true){
isDisplaying = true;
}
for(var i=0; i<c.data.linksArray.length; i++){
c.data.linksArray[i].isVisible = false;
}
if(isDisplaying == true){
item.isVisible = false;
}else{
item.isVisible=!item.isVisible;
}
}
console.log('icon-link-list');
console.log($scope);
}
This all works fine, but we'd like to refine it by adding a sliding effect to the .linkList class. Right now, when an icon is clicked, the .linkList div appears very abruptly. Is there a way to add a sliding transition effect to that div using css?
You can solve this by pure css animations. Aplly this css to the item which will we hidden/shown. The animation will play anytime css attribute 'display' will change. I guess it's the linkList element?
.linkList {
animation: slideFromLeft .2s;
animation-timing-function: ease;
animation-fill-mode: forwards;
opacity: 0;
}
#keyframes slideFromLeft{
0% {
opacity: 0;
transform: translateX(50px);
}
100% {
opacity: 1;
transform: none;
}
}
Edit: you maybe have to change ng-if on linkList to ng-show.
From the Docs:
Animations in AngularJS are completely based on CSS classes. As long as you have a CSS class attached to an HTML element within your application, you can apply animations to it.
As ngRepeat does its thing, each time a new item is added into the list, ngRepeat will add an ng-enter class to the element that is being added. When removed it will apply an ng-leave class and when moved around it will apply an ng-move class.
For more information, see
AngularJS Developer Guide - Animations
I am trying to implement a slide effect using ng-animate and CSS styles, but can't figure out what's wrong with my code...
Can I do this using values in percentages for min-height and max-height? I cant use fixed values in px.
JSFIDDLE
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
Click to toggle menu
<div class="menu" ng-show="collapsed" ng-animate="{show: 'menu-show', hide: 'menu-hide'}">
<div class="files">
<input type="checkbox" />
<label>first</label>
<input type="checkbox" />
<label>second</label>
</div>
<div class="diffs">
<input type="checkbox" />
<label>first</label>
<input type="checkbox" />
<label>second</label>
</div>
</div>
</div>
CSS:
.menu-show-setup, .menu-hide-setup {
transition:all 0.5s ease-out;
overflow:hidden
}
.menu-show-setup {
max-height:0;
}
.menu-show-setup.menu-show-start {
max-height:25%;
}
.menu-hide-setup {
max-height:25%;
}
.menu-hide-setup.menu-hide-start {
max-height:0;
}
First ensure you have angular and angular-animate loaded.
The CDN for angular-animate is ...
<script src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-animate.js"></script>
Then you need to reference the animations that ngAnimate gives ...
https://docs.angularjs.org/api/ngAnimate
For example, ng-if when switched from false to true will add the class .fade AND .ng-enter to the element on which the ng-if is located. These classes will be automatically removed after a short time. ngAnimate does this for you.
What you HAVE to do is to style what these classes do ...
example:
.fade.ng-enter {
transition:0.5s linear all;
opacity:0;
}
/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
opacity:1;
}
now ng-animate will animate from .fade.ng-enter to .fade.ng-enter.ng-enter-active
if you do not define these styles ng-animate will do nothing.
You will see classes being added and remove by ng-animate if you inspect the relevant element in your browser's develop tools. If you cannot see these classes being added and removed then something is wrong with your loading of angular or ng-animate.