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.
Related
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>
After sifting through a bunch of forums and questions on stackoverflow, it seems to me that using JavaScript is a unavoidable here. I have successfully implemented an animation of a list on my site, but I would like the animation to only play after an image has been clicked (and then to close it by clicked again).
This is the animation:
.scale-in-hor-left { -webkit-animation: scale-in-hor-left 1.2s cubic-bezier(0.19, 1, 0.22, 1) both;
animation: scale-in-hor-left 1.2s cubic-bezier(0.19, 1, 0.22, 1) both;
}
#-webkit-keyframes scale-in-hor-left {
0% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
}
#keyframes scale-in-hor-left {
0% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
}
And the image I would like to activate it has nothing special going on
<img id="imagename" src="#" height="#" />
I know the JavaScript looks something like this:
function ani(){
document.getElementById('imagename').className ='scale-in-hor-left';
}
But every time I try some HTML to use the two together, I just end up with a button or nothing, and I have yet to get the animation to stop before the click. (Also, will successfully getting the onclick to work ensure that the animated element is invisible before activation based n the 0%s in the CSS?)
You are right in thinking that you'll want to control the animation with a click event handler; otherwise, as you're seeing, your CSS animation kicks off immediately.
As written, your ani() function will only add your animation class to your target "list" element. You will need to toggle the class name on 'click' to alternately add or remove it. To do that, the event handler needs to determine which action to take.
Assuming that you're attempting to accomplish this in vanilla JavaScript (that is, you aren't using a library like jQuery — which has a .toggleClass() method of its own), you can use the presence of the class name itself to determine this…
var
CLASSNAME_TOGGLE = 'toggle-class',
el_trigger = document.getElementById('trigger'),
el_target = document.getElementById('target');
function toggleClass(event) {
event.preventDefault();
if (el_target.classList.contains(CLASSNAME_TOGGLE)) {
// remove the class
el_target.classList.remove(CLASSNAME_TOGGLE);
} else {
// add the class
el_target.classList.add(CLASSNAME_TOGGLE);
};
}
el_trigger.addEventListener('click', toggleClass, false);
#target {
/* this would be your list's default styles */
padding: 20px;
margin: 20px;
border: 1px solid #fbb;
background: #fee;
}
#target.toggle-class {
/* this would be your list's animation */
border-color: #bfb;
background: #efe;
}
<div id="target">
Your "List" Element [the target of the toggled class]
</div>
<img id="trigger" src="https://via.placeholder.com/300x50?text=Your+Trigger+Image" />
If your okay with using jquery then:
https://api.jquery.com/click/
$("#imagename").click(function() {
$("#imagename").addClass("scale-in-hor-left");
});
Or with vanilla javascript:
document.getElementById("imagename").addEventListener("click", ani); // This calls your function ani
I have worked on a searchbar that appears when user scrolls down the page, and disappears when they scroll up. I was able to get the animation working perfectly with position: fixed, however, the same styling is not working with position: absolute.
Apparently when the iOS keyboard appears, elements with position: fixed go haywire - so I must make this work with position: absolute. The problem now is that the behavior does not work at all. It is actually behaving almost in reverse, where it appears when the page load and immediately translates upward in a flickering manner. Can anyone come up with a solution?
My code below and is in ReactJS and Scss and you can find the sandbox version here: https://codesandbox.io/s/lxyx58jo4m?fontsize=14. If you are unfamiliar with React, isSearchBar is determining if the class is show-search-bar or hide-search-bar based on the scroll
<div className={`search-bar-mobile-container ${isSearchBar ? "show-search-bar" : "hide-search-bar"}`} >
<form>
</form>
</div>
#keyframes exit-up-search-bar {
from {
transform: translateY(0);
}
to {
transform: translateY(-76px);
height: 0;
}
}
#keyframes entrance-down-search-bar {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
height: 76px;
}
}
.search-bar-mobile-container{
width: 100%;
height: 76px;
background-color: #00c0d1;
position: absolute;
z-index: 1000000001;
top:-76px;
transition: all 0.3s ease-out;
&.show-search-bar{
animation: entrance-down-search-bar 0.3s forwards;
animation-timing-function: ease-out;
top:0;
}
&.hide-search-bar{
animation: exit-up-search-bar 5s forwards;
animation-timing-function: ease-out;
top:-76px;
}
}
I am trying to make a zoom in effect on an image on hover and on click, the image should stay enlarged. I have a set of 5 images, and everytime I hover on each one of them, they zoom in properly and as I move my mouse, they zoom out just like I want them.
The problem is when I try to select an image. When I do this, the image should get slightly larger and stay as is and not decrease in size and go back to normal. This is where I think is the conflict between the hover and click function. Also, when I select another image, the other image which was previously zoomed in(selected) should get back to it's original size but this is also not working now due to this conflict.
I have done some searching around S.O but can't find anything that's helping me.
Below is my code:
//Item hover
$(".anItem").hover(function() {
$(this).addClass('transition');
}, function() {
$(this).removeClass('transition');
});
//Select Item
$(".anItem").click(function(){
$(".anItem").each(function() {
$(this).removeClass("selectedItem");
});
if($(this).hasClass("selectedItem")){
$(this).removeClass("selectedItem");
itemColor = "";
}else{
itemColor = $(this).data("color");
$(this).addClass("selectedItem");
$("#oneBtn").show();
}
});
CSS
.anItem{
width: 90%;
height: auto;
display: block;
margin: 0 auto;
cursor: pointer;
}
.transition {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
}
.anItem{
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
}
/*
.anItem:hover{
background-color: #ddd;
opacity: 0.7;
}
*/
.selectedItem{
width: 230px;
height: auto;
}
You wants something like this ?
See this fiddle
I've simplified your JS code like this :
$(function(){
//Select Item
$(".anItem").click(function(){
$('div').find('img').addClass('anItem');
$(this).removeClass("anItem");
});
});
The :hover part is done with CSS only in my code.
So basically I have a process with multiple steps that users will go through. Whenever they click a forward button, I want to slide the current step to the left and slide the next step on from right to left. When hitting backwards, I want the current step to slide off to the right and the previous step to slide in from the left. I have it working so it correctly does the slide on the first click both ways, the problem arrives when I basically try to toggle it (so clicking on forward, then back). When I do this, the thing will slide off correctly, but the previous step does not slide back on, leaving a blank content area. This is the state of the classes once you hit forward first, then hit back:
Here's my animation CSS:
#keyframes slide-in-from-left {
0% { tranform: translate(-100%); }
100% { transform: translateX(0%); }
}
#keyframes slide-out-left {
0% { transform: translateX(0%); }
100% { transform: translateX(-100%); }
}
#keyframes slide-in-from-right {
0% { transform: translateX(100%); }
100% { transform: translateX(0%); }
}
#keyframes slide-out-right {
0% { transform: translateX(0%); }
100% { transform: translateX(100%); }
}
// Animation Classes
// ------------------------------
.slide-in-from-left {
animation: slide-in-from-left 0.5s forwards;
}
.slide-out-left {
animation: slide-out-left 0.5s forwards;
}
.slide-in-from-right {
animation: slide-in-from-right 0.5s forwards;
}
.slide-out-right {
animation: slide-out-right 0.5s forwards;
}
And then I just have:
[class^="step-"] {
position: absolute;
}
.step-4 {
transform: translateX(-100%);
}
And my jQuery/coffeescript:
goForwardAStep = () ->
step = $(this).data('step')
$('.signup .step-' + step).addClass('slide-out-left')
$('.signup .step-' + (step + 1)).addClass('slide-in-from-right')
goBackAStep = () ->
step = $(this).data('step')
$('.signup .step-' + step).addClass('slide-out-right')
$('.signup .step-' + (step - 1)).addClass('slide-in-from-left')
Should I be removing a class somewhere when the steps change? Should I have more classes involved to make sure things are laying off screen where they should?
A simpler approach. 3 clases for the state:
.current {
transform: {translateX(0%);}
}
.moved-left {
transform: {translateX(-100%);}
}
.moved-right {
transform: {translateX(100%);}
}
and a permanent one
.slide {
transition: transform 0.5s;
}