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;
}
Related
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;
}
}
}
}
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 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
Im working with animate.css for a bouncein-out simple animation for a login slide.
http://www.freelancing.com.br/
This is the trigger:
$('body').on('click', '.actions .login', function(){
$('#login').removeClass('bounceOutUp');
$('.overlay').fadeIn(300);
$('#login').addClass('bounceInDown');
});
$('body').on('click', '#login .close', function(){
$('#login').removeClass('bounceInDown');
$('#login').addClass('bounceOutUp');
});
and the basic css markup:
.animated {
-moz-animation-fill-mode: both;
-moz-animation-duration: 1s;
-moz-transition: all 0.3s ease-in-out;
}
#-moz-keyframes bounceInDown {
0% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px);
}
100% {
-moz-transform: translateY(0);
}
}
#-moz-keyframes bounceOutUp {
0% {
-moz-transform: translateY(0);
}
20% {
opacity: 1;
-moz-transform: translateY(20px);
}
100% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
}
I really dont know why this is rolling on at all. The markup is just the same as chrome, and it rolls just fine there.
Unlike Chrome, the transition property is applied to properties inside an animation in Firefox.
Remove the [-moz-]transition property and your CSS3 animation will work fine in both Firefox and Chrome.
ps. You're missing -moz-box-sizing: border-box; in some of your elements.