After I use CSS transition or animation that includes rotate the whole containing div gets a little bit blurry,
I read that it is some kind of side effect from redrawing the element, but is there a way to prevent it?
.toggle {
position: absolute;
width: 36px;
height: 36px;
bottom: 7px;
right: 94px;
z-index: 200;
background: transparent url("../img/handle-open.png") no-repeat;
-webkit-transition: all 1s cubic-bezier(0.91,0.00,1.00,1.00);
-moz-transition: all 1s cubic-bezier(0.91,0.00,1.00,1.00);
transition: all 1s cubic-bezier(0.91,0.00,1.00,1.00);
}
.toggle-closed {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
I tries to achieve the same with animate and got the same result
Update: I noticed something weird happening - in chrome, when the animation runs the element gets blurry and when the animation stops it return to normal,
on iOS however it happens the other way around - the image is clear while animated but gets blurry when completed! another weird #$$ bug!?
Ive seen issues such as this before after doing animations. Check the dimensions of the object after the transition, it may very well have changed in size by a few points causing blurry-ness. i,e:
Before transition: 36x36
After Transition: 36.2 x 36.8
Related
I'm using Material-UI and Styled-Components. And I'm struggling with changing the color of the slider. I've been able to change the color of the thumb and track. But when hovering over and clicking the thumb, a blue haze surrounds the thumb. How do I change the color of this?
I've been able to style other parts (track, ticks, thumb etc) using the classes mentioned in the API (https://material-ui.com/api/slider/#css). But not this shadow effect.
https://codesandbox.io/s/ecstatic-satoshi-3mzrj?file=/src/App.js
The shadow effect is also a part of thumb.
You can simply use something like
& .MuiSlider-thumb:hover {
color: red;
box-shadow: 0 0 0 10px rgba(0, 255, 0, 0.3) !important;
}
or if you don't want to use !important, try to manipulate it with this class:
.MuiSlider-thumb.Mui-focusVisible, .MuiSlider-thumb:hover {
// your code here
}
Yellow is the image, cyan is the coords, red is the centre for both. Coords are like that because that is the allowable area in the map.
Ive got coordinates where the actual center of them is not the middle point of the coordinates. That means each side is a little wonky from the center.
As i know the exact center from the coordinates, could it be possible to anchor that center to the middle of the image where it is the actual center for those coordinates. Would be a blast to just slap it there.
Or could i somehow add a margin towards each direction so with a little fiddling i could make it like in the illustration.
I have attempted to play with the coordinates themselves to make it fit the image, but that feels impossible to make it right, the image either goes wonky or the markers that i add go off their right spots whenever i get one of the edges right.
Edit: and im using CRS.Simple here.
The best solution is using the turf library
const map = L.map('mapid').setView([52.308478623663355, 19.281005859375004], 5);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
const test = [
[15.3369140625, 49.55372551347579],
[23.97216796875, 49.55372551347579],
[23.97216796875, 54.316523240258256],
[15.3369140625, 54.316523240258256],
[15.3369140625, 49.55372551347579]
];
const polygon = turf.polygon([test]);
const centroid = turf.centroid(polygon);
const featCollection = {
features: [polygon, centroid]
}
const polu = L.geoJSON(featCollection).addTo(map);
map.fitBounds(poly.getBounds());
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
min-height: 100%;
}
#mapid {
width: 100%;
height: 100%;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#turf/turf#5/turf.min.js"></script>
<div id="mapid"></div>
I don't recommand to use turf if it is not necessary.
You can use the Leaflet built-in getCenter() function.
getCenter() is working for Polyline, Polygon and Rectangles.
getCenter(): Returns the center (centroid) of the polyline / polygon / rectangle.
Resolved by making calibration points to the imageOverlay, taking coords from those points, adding them into leaflet as markers, then fiddling around once again but with those calibration points i got them centered in under an hour. Still not perfect but i guess im happy with it.
How do I get ng-enter and ng-leave animations to work in ion-view?
<ion-view class="kitchenmenu"></ion-view>
CSS:
.kitchenmenu{background:yellow}
.kitchenmenu.ng-leave {
-webkit-animation: animated slideInDown 0.5s both ease-in;
-moz-animation:animated slideInDown 0.5s both ease-in;
animation: animated slideInDown 0.5s both ease-in;
}
.kitchenmenu.ng-enter {
-webkit-animation:animated slideInUp 0.5s both ease-in;
-moz-animation:animated slideInUp 0.5s both ease-in;
animation:animated slideInUp 0.5s both ease-in;
}
The above however does not work. I tried adding ng-view directive to it as well but no help.
We're running into a problem trying to use GWT sprites for different-sized buttons, using the same background image, like so:
#Source("background.png")
#ImageOptions(width=200,height=50)
ImageResource wideButton();
#Source("background.png")
#ImageOptions(width=100,height=50)
ImageResource narrowButton();
In the css we use the image resource like so:
#sprite .wideButton {
gwt-image: "wideButton"; }
#sprite .wideButton {
gwt-image: "narrowButton"; }
This produces DIV elements with the proper dimension, but it does not display the image properly when these dimensions are smaller than the image's original width and height: the picture is cropped to fit, rather than scaled.
Setting the width and height in the css does not solve the display problem.
#sprite .wideButton {
gwt-image: "narrowButton";
width: 100px;
height: 50px;
}
Is there a way to make this work, or were sprites simply not designed to be used in this way? Thanks in advance.
I'm trying to animate a canvas on three different layers on the onmousedown and ontouchstart. The three canvas go from left to right at a different speed to give a perspective effect as long as the onmouseup or ontouchend are not fired.
I am using #-webkit-keyframes css to do my animations:
#-webkit-keyframes aCarsRight
{
from{background-position: 0px 0px;}
to{background-position: 640px 0px;}
}
.cars_move_right
{
-webkit-animation-name: aCarsRight;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: 1;
-webkit-transition-timing-function: linear;
}
What I would like to do is get the current background-position of the three layers prior to disabling the pan animation and set them manually so when I remove the .cars_move_right class from my div is stays in the same position instead of rolling back to its default position.
Is there a way to get the background-position or just a work around to get what I want? The page is meant for iPhone and iPod Touch.
Thanks !
I found something interesting. Instead of grabbing the background-position, stop the animation and set the background-position to my divs, I pause the animation.
document.getElementById('global').style.webkitAnimationPlayState = 'paused';
document.getElementById('global_cars').style.webkitAnimationPlayState = 'paused';
document.getElementById('global_car').style.webkitAnimationPlayState = 'paused';
Haven't had the chance to test it on iPhone yet.
And, here's a method that seems to work cross-browswers to get any property:
window.getComputedStyle(document.getElementById('div'))['background-position'];
Have you tried:
var blah = ele.style.backgroundPosition;
That will return it like "10px 57px"
If the css rule has a hyphen in it then afaik in Javascript the hyphen is removed and camel case applied.
I found that I can use this to get the property I couldn't get with [mydiv].style.[property]
function getProperty(property, div)
{
return window.getComputedStyle(document.getElementById(div))[property];
}