I have this html structure:
.Gallery > .Gallery__container > .Gallery__container-item > .Gallery__container-item-image
I want to :hover on .Gallery__container-item affects to .Gallery__container-item-image
&-item{
background-color: $darkgray;
padding: 20px;
border-radius: 20px;
cursor: pointer;
&:hover{
&-image{ //doesn't recognized
transition: scale 1s linear;
transform: scale(1.1);
}
}
}
Using SCSS
The ampersand & in your code will not compile to what you want.
Here is a simplified example (with less markup and less styling):
.Gallery {
&-item {
&:hover {
&-image {
transition: scale 1s linear;
}
}
}
}
will compile to:
.Gallery-item:hover-image {
transition: scale 1s linear;
}
Now, you have few possibilities, first one would be to write the full class name:
.Gallery {
&-item {
&:hover {
.Gallery-item-image {
transition: scale 1s linear;
}
}
}
}
You could also define a variable that will take the value of the selector before the :hover, that's probably what you want to do:
.Gallery {
&-item {
$selector : &;
&:hover {
#{$selector}-image {
transition: scale 1s linear;
}
}
}
}
Related
I followed the tutorial here and it works. How do I change the css to get slide in (when enter) and slide out (when leave).
Currently the css is like this:
.item-enter {
opacity: 0;
}
.item-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.item-exit {
opacity: 1;
}
.item-exit-active {
opacity: 0;
transition: opacity 500ms ease-in;
}
.item-enter {
transform: translateX(100%);
}
.item-enter-active {
transform: translateX(0%);
transition: transform 500ms ease-in-out;
}
.item-exit {
transform: translateX(0%);
}
.item-exit-active {
transform: translateX(100%);
transition: transform 500ms ease-in-out;
}
I need help with a scss mixin. I am trying to add an animation delay using nth:child() selectors by utilizing a for loop inside a mixin. The delay on each child should increase in increments of .5 seconds.
li {
list-style: none;
transform: translateX(100rem);
animation: slideIn .5s forwards;
&:nth-child(1) {
animation-delay: 0s;
}
&:nth-child(2) {
animation-delay: .5s;
}
&:nth-child(3) {
animation-delay: 1s;
}
&:nth-child(4) {
animation-delay: 1.5s;
}
}
I have replaced the original scss with a mixin. Please note the first child above has an animation delay of 0s.
#mixin delay {
#for $i from 1 through 4 {
&:nth-child(#{$i}) {
animation-delay: $i * (0.5s);
}
}
}
The final code.
li {
list-style: none;
transform: translateX(100rem);
animation: slideIn .5s forwards;
#include delay;
}
This works fine except it adds a delay to the first child. How do I rewrite this mixin so it will skip the first child and begin on the second child?
You could loop from 2 to 4 (as #mfluehr said is his comment 'cause by default animation-delay is 0 => https://www.w3schools.com/cssref/css3_pr_animation-delay.asp), adding ($i - 1) to your animation-delay.
So, this could be your new mixin:
#mixin delay {
#for $i from 2 through 4 {
&:nth-child(#{$i}) {
animation-delay: ($i - 1) * (0.5s);
}
}
}
li {
list-style: none;
transform: translateX(100rem);
animation: slideIn .5s forwards;
#include delay;
}
Your output:
li {
list-style: none;
transform: translateX(100rem);
animation: slideIn 0.5s forwards;
}
li:nth-child(2) {
animation-delay: 0.5s;
}
li:nth-child(3) {
animation-delay: 1s;
}
li:nth-child(4) {
animation-delay: 1.5s;
}
I add also an example with new CSS without li:nth-child(1):
li {
list-style: none;
transform: translateX(100rem);
animation: slideIn .5s forwards;
}
li:nth-child(2) {
animation-delay: 0.5s;
}
li:nth-child(3) {
animation-delay: 1s;
}
li:nth-child(4) {
animation-delay: 1.5s;
}
#keyframes slideIn {
100% { transform: translateX(0); }
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
I am new to sass.
Here is my code in scss. Just wondering if this can be simplified further i.e i dont want to repeat the style color, text-decoration and transition.
a {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
div.menu-item-click {
&:hover, &:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
}
Note exactly that use case is covvered better by ReSedano.
You cand do it using mixins:
#mixin mixinName {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
a {
#include mixinName;
}
div.menu-item-click {
&:hover, &:focus {
#include mixinName;
}
}
Also here is example with variables:
#mixin icon($width) {
width: $width;
stroke: currentColor;
}
.icon {
#include icon(25px);
}
And here is example with body
#mixin desktop ($xl: null) { // look here is default Value!
#media (min-width: if($xl, $xl, $screen-desktop)) {
#content; // here is true magic
}
}
.page {
#include desktop { // you may ignore variable because we have default
padding: 30px;
}
}
For this, maybe it is better using a placeholder with #extend directive (the output is less verbose than using a mixin):
%my-class {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
a {
#extend %my-class;
}
div.menu-item-click {
&:hover, &:focus {
#extend %my-class;
}
}
The output is:
a, div.menu-item-click:hover, div.menu-item-click:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
I have been trying for too long to try and get transitions animated as I can in angular.js, with no success.
ng-view works, I can move between views with no issue and the url updates correctly, but no animation is triggered.
My HTML for this is:
<div flex horizontal wrap layout>
<ng-view class="slide"></ng-view>
</div>
My css (taken from http://dfsq.github.io/ngView-animation-effects/app/#/code) is:
.slide {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.slide.ng-enter,
.slide.ng-leave {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.slide.ng-enter {
left: 100%;
}
.slide.ng-enter-active {
left: 0;
}
.slide.ng-leave {
left: 0;
}
.slide.ng-leave-active {
left: -100%;
}
and I am including the animation module:
...
import 'package:angular/animate/module.dart';
import 'package:ch_padart/main_module.dart'; //Main Module set
void main() {
initPolymer()
.run(() {
applicationFactory()
.addModule(new NodeBindModule())
.addModule(new MainModule())
.addModule(new AnimationModule()) //<-- installed animation module
.run();
});
}
...
I am using steps() in my css animation. Now I want to start the css animation after a particular time. Below is an example.
#-webkit-keyframes typing {
from { width: 0 }
to { width:455px; }
}
#-moz-keyframes typing {
from { width: 0 }
to { width:16.3em }
}
#-webkit-keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}
#-moz-keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}
.typing_animation h3 {
position: absolute;
font-size: 36px;
width:455px;
left: 0;
top:110px;
font-style: italic;
display: inline-block;
margin-left: -48px;
letter-spacing: 4px;
white-space: nowrap;
overflow: hidden;
border-right: 1px solid #000;
-webkit-animation: typing 10s steps(25, end), blink-caret 1s step-end infinite;
-moz-animation: typing 10s steps(25, end), blink-caret 1s step-end infinite;
}
The above one results in a cool typing animation. However, it starts right away. I want to hold the typing and start it after a delay of say 5 seconds.
Thanks
PS: A Fiddle in case that's useful
Maybe it's late but this is what you need:
Change your element width from "455px" to "0" ;
Then add "animation-fill-mode: forwards" into your ".typing_animation h3" class, so this css rule force to animation can change the width;
Add your desired delay like this: "animation-delay: 3s".
Notice: Don't forget prefixes and if you use several animations on a element, it's better to use a shorthand animation property. see tutorials.
This is a example: jsfiddle
/* typing animation */
#keyframes typing {from {width: 0} to {width:19em}}
#-webkit-keyframes typing {from {width: 0} to {width:19em}}
#-moz-keyframes typing {from {width: 0} to {width:19em}}
/* blinking animation */
#keyframes blink-caret {from, to {border-color: transparent} 50% {border-color: #000000}}
#-webkit-keyframes blink-caret {from, to {border-color: transparent} 50% {border-color: #000000}}
#-moz-keyframes blink-caret {from, to {border-color: transparent} 50% {border-color: #000000}}
.my-animation {
width: 0;
overflow: hidden;
white-space:nowrap;
border-right: 0.1em solid #000000;
animation: typing 6s steps(30, end) 4s forwards, blink-caret 1s step-end 4s infinite;
-webkit-animation: typing 6s steps(30, end) 4s forwards, blink-caret 1s step-end 4s infinite;
-moz-animation: typing 6s steps(30, end) 4s forwards, blink-caret 1s step-end 4s infinite;
}
Try the animation-delay property:
-webkit-animation-delay: 5s;
animation-delay: 5s;
Note: Add this to the end of your h3 rule
you can use setTimeout function and add class to the particular element
setTimeout(function(){
$('p').addClass('text-show')
}, 3000);
p
{
font-size:60px;
}
.text-show
{
animation: textshow 2s ease-out forwards;
}
#keyframes textshow {
0% {
transform: scale3d(0.6, 0.6, 0.6);
opacity: 0;
}
100% {
transform: scale3d(1, 1, 1);
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>We Design.</p>
thanks,
Jomin George paul