Transition between desired amounts - javascript

An element has class slider-item:
.slider-item{
transform: translateY(100%);
transition: transform 100s ease;
transition-delay: 800ms;
}
When i click on a button ,i want the element to transition between translateY(-100%) and translateY(0).
I add classes prev-version and next by javascript respectively:
.slider-item.prev-version{
transform: translateY(-100%);
transition: none;
}
.slider-item.next{
transform: translateY(0);
transition: transform 100s ease;
transition-delay: 800ms;
}
But i see transition happens between translateY(100%) and translateY(0). next class overrides transform: translateY(-100%); in prev-version class. Please help me what should i do?

The best thing to try would probably be to use Vanilla JavaScript, jQuery, or some other type of framework to directly edit and change the CSS attributes.
So for example the jQuery version would be:
$("#slider-item.next").css("transform:translateY(0)");
Keep in mind you would need to add logic so that if the attribute was 100 it would change it back to 0 and then if it was 0 it would change it back to 100.
w3schools.com/jquery/jquery_css.asp

I might didn't understand your question but seems that you can use css animation for this:
document.querySelector('button').addEventListener('click', function () { document.querySelector('.slider-item').classList.add('example'); });
button {position: fixed; bottom: 10vh} /* just for demo */
.slider-item{
transform: translateY(100%);
transition: transform 100s ease;
transition-delay: 800ms;
}
.example {
animation: example 3s ease-in-out;
}
#keyframes example {
from {transform: translateY(-100%);}
to { transform: translateY(100%);} /* should be the same as the value declared initial on .slider-item */
}
<div class="slider-item">Slider Item</div>
<button>Click</button>

Related

Change `transform-origin` on a CSSTransitionGroup not functioning as expected

I am trying to make a simple component. When a button is pressed, it will show a menu that should slide out from the left. When clicked again, it should slide in from the right. It looks as follows.
I used the following as my enter, enterActive, leave, and leaveActive (respectively).
.open {
opacity: 0;
transform: scaleX(0);
transform-origin: left;
transition: all 200ms ease-in;
}
.opened {
opacity: 1;
transform: scaleX(1);
}
.close {
opacity: 1;
transform: scaleX(1);
transform-origin: right;
transition: all 200ms ease-in;
}
.closed {
opacity: 0;
transform: scaleX(0);
}
There is a working codepen here to show the problem.
What I don't get is: how do I make the close animation start from the right, and move left while closing? It seemed like transform-origin was the correct CSS, but it did not work as intended. The initial opening animation was correct, but not the leaving animation.

Transition from one image to another and have it rotate during transtion: CSS

http://punkave.com/
The top left Logo: when you hover over it:
How do you code this?
Transition from one image to another and have it rotate.
You can use transform on :hover for the rotated state. And transition for the animation.
#logo {
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
#logo:hover {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}

waitForImages Plugin - not waiting

My jquery/js code is not waiting for images loaded to fade out. What is the problem?
$('#entry').css('background-image','url(../img/backg3.jpg)').waitForImages(function() {
$('#load').fadeOut(1000);
$('.spinner').fadeOut(1000);
});
/*******************
Loading
*********************/
#load {
position:absolute;
height:100vh;
width:100vw;
background-color:#ddd;
z-index:1000;
/*-moz-transition:all 2s ease-out;
-webkit-transition:all 2s ease-out;
-webkit-transition:all 2s ease-out;
transition:all 2s ease-out;*/
}
#-o-keyframes spin {
100%{
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes spin {
100%{
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
100%{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin {
100%{
transform: rotate(360deg);
}
}
.spinner {
position:absolute;
top:45vh;
left:45vw;
width:5vh;
height:5vh;
border: 6px solid #F90;
border-left-color:#FC3;
border-bottom-color:#FF6;
border-right-color:transparent;
border-radius:100%;
animation: spin 400ms infinite linear;
margin: auto;
}
<div id="load">
<div class="spinner"></div>
</div>
So I want while my background image is loading to hold the spinner, but it fade outs without image.
Page - http://sarosacramento.com/
Plugin - https://github.com/alexanderdickson/waitForImages
From their github page, it looks like you're supposed to apply .waitForImages() to an element selector (which either has image children or images in its CSS). In your code, instead of applying it to the selector, you're first adding CSS, then trying to apply .waitForImage(), which won't work, since the .css() doesn't return a selector. Try instead:
$('#entry').waitForImages(function () {
$('#load').fadeOut(1000);
$('.spinner').fadeOut(1000);
});
for the JS and just put the background image in normal CSS:
#entry {
background-image: url(../img/backg3.jpg);
}
(If you must set it via JS, do that before applying .waitForImages() to $("entry"):
$('#entry').css('background-image','url(../img/backg3.jpg)');
$('#entry').waitForImages(function () { ...
though I haven't actually tested this.)
Here's an example: http://jsfiddle.net/aq9t6kvk/2/. (It mostly uses your code, but I used some different images that wouldn't be in our caches already. But since the first one might already be loading while JSFiddle is "initializing the awesome", there are some backups for subsequent "Run"s.)

CSS animation, toggle rotate on click

I am try to have the caret in the following rotate 180 degrees on click for my dropdown menu. In the solution Im trying to implement, it changes the class of the the caret to toggle-up or toggle-down on click. The first time I click on it rotates up, the second time it immediately goes back to its starting position and then rotates back up. I smell dirty code, whats the easiest way to add this toggle rotation animation. Thanks in advance for any help. Heres my current css:
.toggle-up {
animation-name: toggle-up;
animation-delay: 0.25s;
animation-duration: 0.75s;
animation-fill-mode: forwards;
}
.toggle-down {
animation-name: toggle-down;
animation-delay: 0.25s;
animation-duration: 0.75s;
animation-fill-mode: forwards;
}
/*animations*/
#keyframes toggle-up {
100% {
transform: rotate(180deg);
}
}
#keyframes toggle-down {
100% {
transform: rotate(180deg);
}
}
You don't really need a keyframe animation for something this simple. If you just add a class to your icon on click then remove it this will apply your rotation. Here is a working plunkr using font awesome and a simple rotation. This is just a simple example, you will want to make use of vendor prefixes and be aware that css transitions do not work in older browsers.
<div id="container">
<i id="icon" class="fa fa-arrow-down"></i>
</div>
.fa-arrow-down{
transform: rotate(0deg);
transition: transform 1s linear;
}
.fa-arrow-down.open{
transform: rotate(180deg);
transition: transform 1s linear;
}
(function(document){
var div = document.getElementById('container');
var icon = document.getElementById('icon');
var open = false;
div.addEventListener('click', function(){
if(open){
icon.className = 'fa fa-arrow-down';
} else{
icon.className = 'fa fa-arrow-down open';
}
open = !open;
});
})(document);
.square {
width: 100px;
height: 100px;
background-color: #ff0000;
transition: all 0.75s 0.25s;
}
.toggle-up {
transform: rotate(180deg);
}
.toggle-down {
transform: rotate(0);
}
You should have an initial state in order to complete your animation.
Here is the example: codepen
UPDATE
Here is the version without using javascript: codepen
<label for="checkbox">
<input type="checkbox" id="checkbox">
<div class="square toggle-down"></div>
</label>
#checkbox {
display: none;
}
.square {
width: 100px;
height: 100px;
background-color: #ff0000;
transition: all 0.75s 0.25s;
transform: rotate(0);
}
#checkbox:checked + .square {
transform: rotate(180deg);
}
The general idea is to change the block class using Adjacent sibling selectors and the checkbox checked state.

Binding to a specific CSS transition

Hovering the mouse over an element flips it. I would like a JavaScript function to run when the transition started when the user mouses-off the element, completes.
i.e. I would like some JavaScript to run when the element returns to its natural state (un-flipped, in this case) when the user is no longer hovering over it.
I have tried to bind to the webkitTransitionEnd event, but this fires when the transition for hovering completes as well as when the transition for mouse-off completes. How can I distinguish between these two transitions?
My CSS looks like this:
.back {
position: absolute;
z-index: 800;
-webkit-transition: z-index 0s linear .25s, -webkit-transform .5s ease-in-out;
-moz-transition: z-index 0s linear .25s, -moz-transform .5s ease-in-out;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
.searchResult:hover .back {
position: absolute;
z-index: 900;
-webkit-transition: z-index 0s linear .25s, -webkit-transform .5s ease-in-out;
-moz-transition: z-index 0s linear .25s, -moz-transform .5s ease-in-out;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
My JavaScript looks something like this (unsuitable because fires on completion of both mouse over and mouse-off transitions (i.e. flip and un-flip)):
el.find('.back').bind("webkitTransitionEnd", function (e) { /* do stuff */ });
I think (I have yet to perform more than 2 minutes worth of testing) I have solved this issue.
The solution is to add a conditional in the javascript based upon a known CSS property of the event target element. In my case I know the z-index is different in the flipped and non-flipped states, and using this in my javascript appears to solve the issue.
The conditional looks like this:
if(e.originalEvent.propertyName === '-webkit-transform' &&
$(e.originalEvent.target).css('z-index') === '800') {
/*we know we are at the end of the correct transition*/
}
My test browser is very modern however (at the time of writing): Chrome 22.0.1186.0 canary.
The event listener actually fires multiple times, once for each property. You can access the property name with event.propertyName. Putting it all together...
element.addEventListener("webkitTransitionEnd", function(e){
if(e.propertyName == "width") {
doSomething();
}
}, false);
or in jQuery
$(element).on("webkitTransitionEnd", function(e){
if(e.originalEvent.propertyName == "width") {
doSomething();
}
});

Categories

Resources