I have a button that rotates on click for confirmation.
http://jsfiddle.net/ADukg/21763/
.flip-button-wrapper.selected .button-flipper{
transform: rotateX(-90deg);
}
Initial click works fine, but after rotation, function is not being called.
Not sure if this is css issue of angular.
Please help
I know it's super weird and I can't seem to find anything that explains it as it seems like a bug in CSS, but for some reason when rotating 90 degrees, this seems to occur. I'll try to find other reasons but at least for now try:
.flip-button-wrapper.selected .button-flipper{
transform: rotateX(-89.99deg);
}
It'll render the same but it'll allow you to click and toggle between rotating up and down.
Related
I am a beginner in coding and as a challenge, I decided to make my own portfolio website on react.js + tailwind without the use of extra plugins. (I know, I know, as I figured out later, it was not my best idea)
The main complexity was around making a background behind the slider to look similar to the central slide, and to make a smooth transition.
After hosting the website, I found a glitch that is only visible on mobile browsers. Basically, every time when I change a slide, in the moment of changing State, it flicks the next slide in the array of slides for a millisecond.
I was able to see the same issue in dev tools but does not work every time.
100% visible only on mobile browsers
Small clarification: the slider is functioning by rotating elements within the array by the method Splice. So elements [1],[2], and [3] are always visible on the desktop version while elements [0] and [4] exist but have zero opacity (it is made for the sake of the smooth background transitioning).
The glitch itself: On clicking 'left' the image from element [1] is becoming the central image [2] and it flicks somehow the image from [0] for a millisecond. The same behavior is related to the right image from element[3] and background images. Though, it does not affect the left visible slide [1], because its predecessor is only becoming visible after State change.
My best assumption is that the issue is related to the component "Portfolio" 126 line in the code, but I can not find any other solutions which work.
const onChangeSlide = (direction) => {
if (direction === "left") {
setTimeout(() => {
slides.splice(0, 0, slides.splice(length-1, 1)[0]);
setSlider((prev) => ({...prev , ...slides}));
},700);
You can see the hosted website here > https://Othary.github.io/ArtPhoto
Link to the code here > https://github.com/Othary/PortfolioTest.git
GIF of the issue > https://1drv.ms/u/s!ApRsK-vfrh8MrY9guwisAKJl5bJAfA?e=vkjdGX
I will appreciate any help. Thank you in advance.
Regarding the first issue I checked all images, and their order, and removed StrictMode. No luck for me. I can not grasp how the slider shows the element which supposed to be visible only on the next click. And it is not visible on the fast internet desktop version. As stated above, my best guess is that it is related to the way how I change State.
UPDATE: It looks like after scrolling through all carousels BOTH left and right the flick is disappearing.
So, I assume, it somehow connected with the browser's cache, but I don't understand why it needs to be scrolled in both directions first before the issues disappear. All files are supposed to be preloaded after the first scroll in either direction, not both.
Please help🙌
I try to recreate this effect with curtains-react but I can not find a shader that corresponds, and at the same time make the uniforms work ... If someone can give a lead, an article or an example with curtains-react, it would be of great help to me!
https://www.haritos.co/
It's a infinity draggable slider and when you click on a image, you access to the project, is the raison why I use curtains-react.
I also wanted to use curtains-js in my project. While browsing I found this codepen which is kind of what you need although the click-through is not implemented.
https://codepen.io/AlainBarrios/pen/bXdzmR
It uses curtains-js instead of curtains-react but I think it should be easly convertable. Put the onRender function in the useCurtainsEvent and add event listeners for the draggable events.
useCurtainsEvent("onRender", (curtains) => {})
I would first make a draggable list in react and then add each event of the example one by one. Just remember that animations like these take a lof of time and will to get right :)
I'm working on some sort of 'continuous' animation. Say a div translates from its current location 200px to the right. There's an option to change the distance of translation. While its animating, the user changes from 200px to 400px. The div should still move smoothly until it reaches its final point which is 400px from its previous location. I have done the basic moving animation, however I can't figure out how to make it continues without jumping when the distance changes.
Here's the codesandbox that I'm working on which best illustrates my point above and what I'm struggling with. Any ideas or help would be greatly appreciated. Thanks :))
Edit: Steps to reproduce the jumping problem:
Open the sandbox
Click the 'Toggle' button
Click the 'Add distance' button
While the red div animates, click 'Add distance' button again
And you should see the div jumping
There is probably a way to fix your code so that it works as you want, though I would suggest going in another direction. There are several animation libraries in React that can help you solve this problem. The resulting code is also going to be more portable.
For your specific need, I would suggest using a library called react-move. It is part of the react-tools which provides other cool libraries. I created a CodeSandbox with my take on your problem using react-move.
I only took the transform line for your code, since I wanted to focus on how you could integrate the library into your example.
To create the animation, I imported a component from react-move called Animate. It's the main component of the library. You use this component to wrap a function using the function as child pattern. This function will receive a state object with information regarding the animated element. It also consumes a start, update, enter, and leave function, that represents the state for those actions.
Inside you function as child function is where you define the animation. In our case, we want to translate the Box along its x axis, using the x value provided on the state object.
OBS: On my example the Box returns to the start (x === 0) when its offset value is bigger than the window's width.
I hope it helps.
I have two divs one on top of the other.
The top div is revealed with ngAnimate and pushes the second div down.
I want to use a translateY animation to reveal the top div because it looks good.
#keyframes enter_not_smooth {
from {transform: translateY(-100px);} to {transform: translateX(0px);}
}
#keyframes leave_not_smooth {
from {transform: translateY(0px);} to {transform: translateY(-100px);}
}
Problem: The bottom div does not move smoothly as the top div is revealed, it instead jumps to it's final position.
If I use a height animation to reveal the top div the bottom div moves smoothly as the top div is revealed.
#keyframes enter_smooth {
from {height: 0px;} to {height: 100px;}
}
#keyframes leave_smooth {
from {height: 100px;} to {height: 0px;}
}
Please see this jsfiddle if you need clarification https://jsfiddle.net/9bz4Lwxa/105/
Question: Is there any way I can achieve a smooth animation using the translateY property or another property that will achieve a similar reveal animation where the top div does not grow in height but is full sized and just pushes the bottom div out of the way?
Thank You.
This is a tough one and something I've spent hours and hours and hours trying to accomplish. The only working solution I've come up with is really complicated and not worth all the extra code.
The problem is that when you use transform to animate an element, its bounding box remains static (seemingly behind the DOM scenes) and will not animate as to not affect any sibling elements. For reference, I'd read up on: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
As an alternative to animating height/width/etc (because it causes repaints/reflows in the browser) I've resorted to using transform animations that simply feel better given the predicament.
I've created an example based on your fiddle here:
https://jsfiddle.net/tommywhitehead/5q6wec92/1/
Note: It looks like you might be injecting ngAnimate in a non-traditional way so it's not reading the transition timing function (what places .ng-enter and .ng-enter-active at the right times) but I think this should give you the right idea.
I hope the big vendors can fix this somehow because this has been a huge issue for many devs.
Hope that helps!
Sencha Touch 2.4 has this new toast class(Ext.Toast), which looks nice. But, by default, the location of the toast is centered in the viewport. Is there any way I can push it towards the bottom?
I looked at the top config, but it doesn't work well. (Pushes it down, but it's not centered horizontally now).
Tried a combination of top and left configs, but it's not perfect. I don't seem to find any hints in the docs.
Basically, I need to display the toast around of 70% of the height, and it should be centered horizontally in the viewport.
Not ideal but the following css will do it. Just change the number depending on high high you want it.
.x-toast {
top: -150px;
}
I've created a plugin that can create toast messages similar to Android style at the bottom of the screen.
I've also faced this problem I found the solution.You can also find it by the below link.
sample toast with different position and animation