Styjun

Drawing a sigmoid function and its derivative in tikz

Does "boire un jus" tend to mean "coffee" or "juice of fruit"?

Odd PCB Layout for Voltage Regulator

What happens if a caster is surprised while casting a spell with a long casting time?

iMac 2019: Can I mix the old modules with the new ones when upgrading RAM?

Which high-degree derivatives play an essential role?

What could a Medieval society do with excess animal blood?

What would you need merely the term "collection" for pitches, but not "scale"?

How to count the number of bytes in a file, grouping the same bytes?

How is it possible for tall trees to pull water to heights more than 10m?

Why do movie directors use brown tint on Mexico cities?

What was the point of separating stdout and stderr?

How do I debug a dependency package? If I have its source code

Chandra exiles a card, I play it, it gets exiled again

What is the meaning of "it" in "as luck would have it"?

"in 60 seconds or less" or "in 60 seconds or fewer"?

Multiple tests with effects all in same direction but only few significant

How do I present a future free of gender stereotypes without being jarring or overpowering the narrative?

Why didn't Caesar move against Sextus Pompey immediately after Munda?

Move up, right, left and down functions

How useful would a hydroelectric power plant be in the post-apocalypse world?

Is it OK to say "The situation is pregnant with a crisis"?

Could you fall off a planet if it was being accelerated by engines?

German idiomatic equivalents of 能骗就骗 (if you can cheat, then cheat)

How to conditionally animate with styled-components

Target another styled component on hoverIsolated styled-components with @font-faceHow to change the css on a component using styled-componentsHow to focus a styled component?styled-components - how to set styles on html or body tag?Styled Components: props for hoverMultiple nested components in styled componentsAre styled components memoized?How to extend styled components?

0

I'm trying to animate a line when an input is checked with styled-components.

I've tried with (a) and without (b) keyframes, and both return (c):

(a)

import styled, keyframes from 'styled-components';

const Input = styled.input``

const NavIconLine = styled.span`
 display: block;
 position: absolute;
 height: 3px;
`;

const Animation = keyframes`
 from 
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 width: 70%;
 

 to 
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 width: 100%;
 
`;

const NavIconLine2 = styled(NavIconLine)`
 width: 70%;

 $Input:checked ~ & 
 animation: $Animation 0.15s ease-in-out;
 
`;

(b)

import styled from 'styled-components';

const Input = styled.input``

const NavIconLine = styled.span`
 display: block;
 position: absolute;
 height: 3px;
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 -webkit-transition: 0.15s ease-in-out;
 transition: 0.15s ease-in-out;
`;

const NavIconLine2 = styled(NavIconLine)`
 width: 70%;

 $Input:checked ~ & 
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 width: 100%;
 
`;

(c)

function Component 
 return (
 <Input type="checkbox" id="menu" />
 <NavIcon for="menu">
 <NavIconLine1 />
 </NavIcon>
 )

I think that perhaps the issue is with the targeting of the element in "$Input:checked ~ & ..." as "~ &" refers to the sibling and not the parent's sibling? If that's the case, is possible to target it?

Thanks!

styled-components

share|improve this question

asked Mar 25 at 16:29

Lewis LloberaLewis Llobera

1333 bronze badges

add a comment | 

0

I'm trying to animate a line when an input is checked with styled-components.

I've tried with (a) and without (b) keyframes, and both return (c):

(a)

import styled, keyframes from 'styled-components';

const Input = styled.input``

const NavIconLine = styled.span`
 display: block;
 position: absolute;
 height: 3px;
`;

const Animation = keyframes`
 from 
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 width: 70%;
 

 to 
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 width: 100%;
 
`;

const NavIconLine2 = styled(NavIconLine)`
 width: 70%;

 $Input:checked ~ & 
 animation: $Animation 0.15s ease-in-out;
 
`;

(b)

import styled from 'styled-components';

const Input = styled.input``

const NavIconLine = styled.span`
 display: block;
 position: absolute;
 height: 3px;
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 -webkit-transition: 0.15s ease-in-out;
 transition: 0.15s ease-in-out;
`;

const NavIconLine2 = styled(NavIconLine)`
 width: 70%;

 $Input:checked ~ & 
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 width: 100%;
 
`;

(c)

function Component 
 return (
 <Input type="checkbox" id="menu" />
 <NavIcon for="menu">
 <NavIconLine1 />
 </NavIcon>
 )

I think that perhaps the issue is with the targeting of the element in "$Input:checked ~ & ..." as "~ &" refers to the sibling and not the parent's sibling? If that's the case, is possible to target it?

Thanks!

styled-components

share|improve this question

asked Mar 25 at 16:29

Lewis LloberaLewis Llobera

1333 bronze badges

add a comment | 

I'm trying to animate a line when an input is checked with styled-components.

I've tried with (a) and without (b) keyframes, and both return (c):

(a)

import styled, keyframes from 'styled-components';

const Input = styled.input``

const NavIconLine = styled.span`
 display: block;
 position: absolute;
 height: 3px;
`;

const Animation = keyframes`
 from 
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 width: 70%;
 

 to 
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 width: 100%;
 
`;

const NavIconLine2 = styled(NavIconLine)`
 width: 70%;

 $Input:checked ~ & 
 animation: $Animation 0.15s ease-in-out;
 
`;

(b)

import styled from 'styled-components';

const Input = styled.input``

const NavIconLine = styled.span`
 display: block;
 position: absolute;
 height: 3px;
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 -webkit-transition: 0.15s ease-in-out;
 transition: 0.15s ease-in-out;
`;

const NavIconLine2 = styled(NavIconLine)`
 width: 70%;

 $Input:checked ~ & 
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 width: 100%;
 
`;

(c)

function Component 
 return (
 <Input type="checkbox" id="menu" />
 <NavIcon for="menu">
 <NavIconLine1 />
 </NavIcon>
 )

I think that perhaps the issue is with the targeting of the element in "$Input:checked ~ & ..." as "~ &" refers to the sibling and not the parent's sibling? If that's the case, is possible to target it?

Thanks!

styled-components

share|improve this question

asked Mar 25 at 16:29

Lewis LloberaLewis Llobera

1333 bronze badges

(a)

import styled, keyframes from 'styled-components';

const Input = styled.input``

const NavIconLine = styled.span`
 display: block;
 position: absolute;
 height: 3px;
`;

const Animation = keyframes`
 from 
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 width: 70%;
 

 to 
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 width: 100%;
 
`;

const NavIconLine2 = styled(NavIconLine)`
 width: 70%;

 $Input:checked ~ & 
 animation: $Animation 0.15s ease-in-out;
 
`;

(b)

import styled from 'styled-components';

const Input = styled.input``

const NavIconLine = styled.span`
 display: block;
 position: absolute;
 height: 3px;
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 -webkit-transition: 0.15s ease-in-out;
 transition: 0.15s ease-in-out;
`;

const NavIconLine2 = styled(NavIconLine)`
 width: 70%;

 $Input:checked ~ & 
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 width: 100%;
 
`;

(c)

function Component 
 return (
 <Input type="checkbox" id="menu" />
 <NavIcon for="menu">
 <NavIconLine1 />
 </NavIcon>
 )

share|improve this question

asked Mar 25 at 16:29

Lewis LloberaLewis Llobera

1333 bronze badges

share|improve this question

asked Mar 25 at 16:29

Lewis LloberaLewis Llobera

1333 bronze badges

asked Mar 25 at 16:29

Lewis LloberaLewis Llobera

1333 bronze badges

asked Mar 25 at 16:29

Lewis LloberaLewis Llobera

1333 bronze badges

1 Answer
1

active

oldest

votes

0

Solved:

Instad of writing the condition on the descendant, it's written on the parent's sibling:

const Input = styled.input`
 display: whatever;

 :checked + $NavIcon 
 $NavIconLine1 
 animation: whatever;
 
 
`;

share|improve this answer

answered Mar 26 at 8:12

Lewis LloberaLewis Llobera

1333 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55342384%2fhow-to-conditionally-animate-with-styled-components%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Solved:

Instad of writing the condition on the descendant, it's written on the parent's sibling:

const Input = styled.input`
 display: whatever;

 :checked + $NavIcon 
 $NavIconLine1 
 animation: whatever;
 
 
`;

share|improve this answer

answered Mar 26 at 8:12

Lewis LloberaLewis Llobera

1333 bronze badges

add a comment | 

0

Solved:

Instad of writing the condition on the descendant, it's written on the parent's sibling:

const Input = styled.input`
 display: whatever;

 :checked + $NavIcon 
 $NavIconLine1 
 animation: whatever;
 
 
`;

share|improve this answer

answered Mar 26 at 8:12

Lewis LloberaLewis Llobera

1333 bronze badges

add a comment | 

Solved:

Instad of writing the condition on the descendant, it's written on the parent's sibling:

const Input = styled.input`
 display: whatever;

 :checked + $NavIcon 
 $NavIconLine1 
 animation: whatever;
 
 
`;

share|improve this answer

answered Mar 26 at 8:12

Lewis LloberaLewis Llobera

1333 bronze badges

const Input = styled.input`
 display: whatever;

 :checked + $NavIcon 
 $NavIconLine1 
 animation: whatever;
 
 
`;

share|improve this answer

answered Mar 26 at 8:12

Lewis LloberaLewis Llobera

1333 bronze badges

answered Mar 26 at 8:12

Lewis LloberaLewis Llobera

1333 bronze badges

answered Mar 26 at 8:12

Lewis LloberaLewis Llobera

1333 bronze badges