CSS transform-scale not working properly - javascript

This is my code
// turn a pie into a nav menu (make it smaller)
// this is triggered when a pie should be turned into a nav
function beNavPie(pie) {
$(pie).css("transform", "scale(0.3)");
$(pie).css("transform-origin", "initial");
}
// turn a nav menu into a pie (revert it to original size)
// this is triggered when the nav is clicked
function pieFromNav(nav) {
$(nav).css("transform", "scale(1)");
$(nav).css("transform-origin", "initial");
}
As you can see in the gif below, it's working fine.
But the turn is:
Every pie's first time to be a nav menu(a small one), the transition
path curves, after that, it's transition will not already have path curves. here is jsfiddle: https://jsfiddle.net/q3jytbkr/
here is sample
A longer look

Problem is you are transitioning all properties, including transform-origin. Change your CSS from
.show-pie {
visibility: visible;
transition: .3s;
}
to
.show-pie {
visibility: visible;
transition: transform .3s;
}
https://jsfiddle.net/q3jytbkr/1/
Alternatively, you could just set the transform-origin to initial before you start changing the scale.

Related

Jquery draggable helper affected by css changes on original element

I'm using JQuery UI to enable the drag and drop on some elements.
My problem is that the helper of the drag and drop feature is affected by changes on the original dragged element.
For example if the original element get visibility: hidden/display:none during drag, the helper disappear too.
Same thing if i translate the original element, the helper get translated too.
in my case i'm using helper: 'clone' or a function that create a brand new dom element for the helper.
I'm just trying to make a panel hide while i start dragging so that it does not cover other elements, but doing this the drag helper gets the problem.
Have any idea on how to solve this?
thanks in advice
EDIT: i noticed that my real problem is that the style changes on the father of the dragged element are causing the issue:
example: https://codepen.io/Ciappone/pen/mdRKoXX
<div class="test">
<i class="original fas fa-save"></i>
</div>
.dragging{
transform: translateY(200px);
}
.test{
transition: transform 1s linear;
}
$('document').ready(function(event){
$('.original').draggable({
cursor: 'grab',
helper:function(){
let el = document.createElement('i');
el.className ='fas fa-times';
return el;
},
start: function(event){
$('.test').toggleClass('dragging');
},
stop: function(event){
$('.test').toggleClass('dragging');
}
})
});
In the example i'm dragging an icon and when i start the drag, i translate the father down for 200px, the drag helper do the same and i don't want this behavior, i just want it to stay attached do the pointer
Do the following to hide the diskette icon while dragging:
Modify the .dragging style to visibility:hidden
Add style that applies to the element created by helper. .test.dragging i.fa-times { visibility: visible; }
The final css looks like this
.dragging{
visibility: hidden;
}
.test{
transition: transform 1s linear;
}
.test.dragging i.fa-times {
visibility: visible;
}

Popper js add animation to action menu

I am using popper js to create an action menu.
this.popper = new Popper(originElement, dropdownElement, {,
removeOnDestroy: true,
modifiers: {
applyStyle: {
onLoad: () => {
dropdownElement.style.display = "block";
}
}
}
});
My problem is that it just shows the dropdown without animation. I can't find anything in the docs about animation. How can I add animation?
The reason why there is no "animation" is that you transition from display: none; to display: block.
There is no way to animate the change between these two states, but there are different ways to approach this problem. You could for instance animate opacity: 0 to opacity: 1 which would make the dropdown fade in / fade out.
My personal favourite is animating max-height. To do this: Set your menu's CSS like this:
.yourclassname {
max-height:0;
overflow:hidden; /* Like this your content will not be visible until the height is high enough */
transition: max-height ease .5s; /* Animation */
}
In JS all you need to do is set the max height to something like 1000px or less/more and your animation is done.

Change CSS div style (conditional?)

Got a centered fullscreen main at the very middle of the webpage:
<div id="main"></div>
The main opens a default web:
<script>
$("#main").html('<object data="http://www.myweb.com"/>');
</script>
And two hidden sidenavs (one at the left and one at the right) showable through two buttons and with a list of links inside them. sidenavLeft pushes the main to the right when appears, and sidenavRight pushes the main to the left.
The default main page can be changed just by clicking on the links inside the sidenav menus.
I can't figure out how to say to the #main, move to the right when the sidebarLeft is shown and to the left when the sidebarRight is shown. I think I need a CSS conditionals to do this, but as far as I know there is no conditional support in CSS.
/* if the sidebarRight is shown, push the page content to the left */
#main {
transition: margin-right .5s;
}
/* if the sidebarLeft is shown, push the page content to the right */
#main {
transition: margin-left .5s;
}
How can I do this with CSS/Jquery/javascript?
In JQuery:
if ($("#sidebarLeft").is(':visible')) {
$("#main").css("transition", "margin-right .5s");
}
Or better:
.transition-right {
transition: margin-right .5s;
}
if ($("#sidebarLeft").is(':visible')) {
$("#main").addClass("transition-right");
}
Also, you should put that code on your button click handlers. So when button triggers show/hide to do something else too (change margins)

CSS animation causing z-index problems

I have a weird conflict in my main.js file. I run a fade up animation on ".main-headline--left"
$('.main-headline--left').addClass('wow animated fadeInUp');
This works fine, but when I add a piece of code that makes nav-links active based on what page the user is on, the animation obstructs the logo which hangs off of the navbar (logo height > navbar fixed height). Here is that code:
if(location.pathname != "/") {
$('.navbar-nav--split a[href^="/' + location.pathname.split("/")[3] + '"]').addClass('is-active');
} else $('.navbar-nav--split a:eq(0)').addClass('is-active');
I notice this only happens in Chrome. Is there perhaps a better way to organize my Javascript or a better way to write the code so that this problem is rectified?
Here is the css animation:
#keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(30px);
transition: .1s transform, .1s opacity;
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
I did not explicitly set z-index on containing elements. However, setting a z-index of 9999 on both the logo navbar does not fix the problem.
today I ran into similar issue... I patched it by changing the value of animation-fill-mode for the class animated as below...
.animated
{
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: initial; //Changed from both to initial
animation-fill-mode: initial; /*Changed from both to initial
}
Notably, setting the animation-fill-mode to forwards was causing my issue...
animation-fill-mode: both inherits both forwards as well as backwards property, so my trillionth z-index element got hid under the millionth z-index element...
Setting it to initial worked for me.
I found a fix to my problem, but I have no idea why this solution works. By adding "-webkit-backface-visibility: hidden;" to my logo element, my logo no longer gets cropped when the animation on my headline and the transition on my anchor's pseudo element are run on load. I was wondering whether anyone knows why this would fix this problem. My logo element never moves on the z axis. There is a jsfiddle in the comment section that shows the code
#GughaG's answer is right if don't need forwards, but if you do need, try adding position: absolute -- fixed me right up!
The answers here did not initially make it clear that the transformed elements cannot be siblings of each other and still retain z-index layering. Therefore, a top, middle and bottom layer animating would flip/flop all over each other and other elements in the page, for example a modal popup.
What needs to happen is a wrapping control layer that is not animated but holds the z-index order of things.
i.e. from this:
<wrapper>
<child-1 /> <- animated element bottom layer
<child-2 /> <- animated element middle layer
<child-3 /> <- animated element top layer
</wrapper>
To this:
<wrapper>
<child-wrapper-1>
<child-1 /> <- animated element bottom layer
</child-wrapper-1>
<child-wrapper-2>
<child-2 /> <- animated element middle layer
</child-wrapper-2>
<child-wrapper-3>
<child-3 /> <- animated element top layer
</child-wrapper-3>
</wrapper>
Where child-wrapper 1 has z-index of 1, child-wrapper 2 has z-index of 2 etc. and are NOT animated.
Here is a working fiddle: https://jsfiddle.net/pingram3541/8rdx9u2w/show

Adding class to transition element triggers too soon

I'm trying to animate some elements on my page. One of the properties I need to animate is bottom, however, I also need to be able to reposition the element without it animating, that's why I added a seperate class to it: .anim
.slideshow_footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: #fff
}
.slideshow_footer.anim {
-webkit-transition:bottom 0.3s ease-out;
-moz-transition:bottom 0.3s ease-out;
-o-transition:bottom 0.3s ease-out;
-ms-transition:bottom 0.3s ease-out;
transition:bottom 0.3s ease-out;
}
In my Javascript, I do the following:
var footer = $('#footer');
// do some magic with the footer
// ...
// ...
setCss(footer, 'bottom', -100); // position it so it's hidden, this should be immediate
addClass(footer, 'anim'); // add the animation class
setCss(footer, 'bottom', ); // animate the footer sliding in
Note that I'm not using jQuery or anything, it's an inhouse javascript framework.
I have found a workaround that solves the problem, but it's extremely ugly:
var footer = $('#footer');
// do some magic with the footer
// ...
// ...
setCss(footer, 'bottom', -100); // position it so it's hidden, this should be immediate
addClass(footer, 'anim'); // add the animation class
setTimeout(function() {
setCss(footer, 'bottom', ); // animate the footer sliding in
}, 0); // even no timeout works...
Can anyone explain to me what is happening and how this should best be solved? Possibly changing the addClass and setCss functions?
To answer my own question:
Using a timeOut is the correct approach.
The browser doesn't update the visible HTML until the entire JavaScript is done. If it did, setting "right" after "bottom" would move the element twice. From the perspective of the browser, the element instantly gains both "anim" and bottom 0. setTimeout with 0 timeout tells the browser to execute the code as soon as possible, but not in the same round of JavaScript.
The workaround is actually adopted by many people as an "asynchronous" way to run codes

Categories