I'm using these styles with react spring, and after it runs one time, it won't run anymore, if I remove the delay it works fine, why is that?
const styles = useSpring({
loop: true,
to: [
{ opacity: 0, color: '#53317e' },
{ opacity: 1, color: 'white' },
],
from: { opacity: 1, color: 'white' },
delay: 1000,
})
lot of time gone but I had same issue.
To fix it, instead of using
const styles = useSpring({
loop: true,
delay: 2000,
from: {...},
to: [{...}, {...}, ...]
});
I used syntax with passing function instead of object
const [styles, api] = useSpring(() => ({ ... }) )
And then delay prop stops disabling my loop
Related
am look to answer this bug on Apache Echarts with vue 3 Composition API
am using apache echarts for rendering maps as a background, the maps is become from GeoJSON data of province accross my country : Source GeoJSON, the rendering process of GeoJson was successfuly as expected, but take a this code bellow, Here is problems occurs, am expected that after rendering the chart, the series that was defined is expect rendered also, but there is not yet, so whats am wrong? FYi : am need to rendr the chart and make tooltip of each province section of chart series (simplify Chloropeth Mapping), am following many guide but there is not works yet. am also referring of the official documentation of apache echart example her Chloropet Apacghe Echarts, but not working as expeccted. so is there can give me the suggestion of am wrong ? great thanks for all, looking best oppinions and suggestion from you here is my result that is not expected :
just rendered maps, not the defined series
and here is my expectation(same as example) : Expected the series is rendered in maps section and if am hovered my cursor the tooltip is show the data value of the given series;
Apache Echart COnfiguration in Vue (as reactive)
title: {
text: 'Peta Sebaran Arsiparis （2022）',
subtext: 'Open source data',
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2
},
geo: {
map: "indonesia-province",
roam: true,
nameProperty: "Propinsi",
tooltip: {
show: true
},
itemStyle: {
color: '#fff'
},
emphasis: {
itemStyle: {
color: undefined,
borderColor: 'green',
borderWidth: 2
},
label: {
show: false
}
},
select: {
itemStyle: {
color: 'green'
},
label: {
show: false,
textBorderColor: '#fff',
textBorderWidth: 2
}
},
regions: generateRegions(provinceNames)
},
visualMap: {
min: 800,
max: 50000,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
},
series: [
{ // 地图配置
name: 'Province daatatasdbashdvjk',
type: 'map',
map: 'indonesia-province', // 自定义扩展图表类型
nameProperty: "Propinsi",
geoIndex: 0,
data: generateMapData(provinceNames)
}
],
}
I am using swiper with vue3 and vite. I have the following options for swiper8.
<swiper
:modules="modules"
:slides-per-view="1"
:space-between="0"
:direction="'vertical'"
:speed="1500"
:mousewheel="{
forceToAxis: true,
sensitivity: 1,
releaseOnEdges,
}"
:height="800"
:prevent-interaction-on-transition="true"
#slideChange="onSlideChange"
#reachEnd="onReachEnd"
>
...irrelevant stuff
</swiper>
Also, I am controlling the releaseOnEdges with the following code.
setup() {
const releaseOnEdges = ref(true)
const onSlideChange = (swiper) => {
setTimeout(function () {
releaseOnEdges.value = false
console.log('swiper change: ', swiper)
}, 500);
}
const onReachEnd = (swiper) => {
setTimeout(function () {
releaseOnEdges.value = true
console.log('swiper end: ', swiper)
}, 750)
}
return {
releaseOnEdges,
onReachEnd,
onSlideChange,
modules: [Mousewheel],
}
}
The last slide scrolls down so fast and the animation is not smooth. That's what I am trying to solve here.
Now, you see the console log in onSlideChange and onReachEnd. I am logging the swiper object. It's supposed to change the releaseOnEdges to false when onSlideChange happens. But it is always true even though the swiper options are reactive.
So, what am I doing wrong here?
I'm trying to use react-spring to run animation X and then do animation Y. I'm using the useChain feature. It seems to run everything in parallel. What am I doing wrong? This is a super-simple scenario and I'm surprised it doesn't work AND my Googling has not turned up a lot of other people with the same problem and/or a solution. There are bugs on useChain in react-spring but they seem to cover more limited scenarios.
As an aside, I thought all React components needed to start with a capital letter so how does animated.div pass the compiler?
code sandbox simple example
This is my component. The box moves diagonally, not in the X axis and then in the Y axis.
export const Shaker = () => {
const xRef = useSpringRef();
const { x } = useSpring({
from: { x: 0 },
to: { x: 1 },
config: config.molasses,
ref: xRef
});
const yRef = useSpringRef();
const { y } = useSpring({
from: { y: 0 },
to: { y: 1 },
config: config.molasses,
ref: yRef
});
useChain([xRef, yRef]);
return (
<animated.div
style={{
width: "10rem",
height: "10rem",
backgroundColor: "green",
marginLeft: x.to((i) => i * 600 - 300),
marginTop: y.to((i) => i * 600 - 300)
}}
></animated.div>
);
};
They say this is a bug in react-spring but don't provide the number of the duplicate.
https://github.com/pmndrs/react-spring/issues/1605
I have createMaterialTopTabNavigator in my app with three tabs. These three tabs themselves belong to different createStackNavigators. I have passed drawer icon as my header right to createMaterialTopTabNavigator.
I want to edit the background color of createMaterialTopTabNavigator tabs but it is getting override with my HeaderRight icon styling.
const Daily = createStackNavigator(
{
Daily: {
screen: DailyStack,
},
Another:{
screen: Another,
}
},
{
headerMode:'none'
},
);
const Monthly = createStackNavigator({
Monthly: {
screen: MonthlyStack,
},
},
{
headerMode:'none'
});
const Range = createStackNavigator({
Range: {
screen: RangeStack,
}
},
{
headerMode:'none'
});
const DashboardTabNavigator = createMaterialTopTabNavigator(
{
Daily,
Monthly,
Range
},
{
navigationOptions: ({ navigation }) => {
return {
// tabBarOptions:{
// indicatorStyle: {
// backgroundColor: "#2E86C1",
// },
// // tabStyle:{
// // backgroundColor: '#F7F9F9'
// // },
// labelStyle :{
// color: '#2E86C1'
// },
// activeTintColor:'blue',
// inactiveTintColor: {
// color: 'green'
// },
// style: {
// backgroundColor: 'white',
// elevation: 0, // remove shadow on Android
// shadowOpacity: 0, // remove shadow on iOS,
// borderWidth:1,
// borderColor:'#ccc'
// }
// },
headerRight: (
<Icon style={{ paddingRight:20 }} onPress={() => navigation.openDrawer()} name="menu" color='#000' size={30} />
)
};
}
}
)
If I am passing the styling options inside navigationOptions then the styling does not works; only HeaderRight shows, and if I pass the styling options outside the navigationOptions, the styling works but then it hides the HeaderRight Icon from right
you must entirely study this link.
another important subject is that navigationOptions related to every screen in stack. such as this:
const App = createMaterialTopTabNavigator({
TabScreen: {
screen: TabScreen,
navigationOptions: {
headerStyle: {
backgroundColor: '#633689',
},
headerTintColor: '#FFFFFF',
title: 'TabExample',
},
},
});
so if you want to set style for top tab bar, you must use defaultNavigationOptions property such as this:
const DashboardTabNavigator = createMaterialTopTabNavigator(
{
Daily,
Monthly,
Range
},
{
defaultNavigationOptions: ({ navigation }) => {
return {
tabBarOptions:{
style: {
backgroundColor: 'white',
elevation: 0, // remove shadow on Android
shadowOpacity: 0, // remove shadow on iOS,
borderWidth:1,
borderColor:'#ccc'
}
},
};
}
}
)
Sharing common navigationOptions across screens
It is common to want to configure the header in a similar way across many screens. For example, your company brand color might be red and so you want the header background color to be red and tint color to be white. Conveniently, these are the colors we're using in our running example, and you'll notice that when you navigate to the DetailsScreen the colors go back to the defaults. Wouldn't it be awful if we had to copy the navigationOptions header style properties from HomeScreen to DetailsScreen, and for every single screen component we use in our app? Thankfully, we do not. We can instead move the configuration up to the stack navigator under the property defaultNavigationOptions.
I have a Map and a List inside the same container with 2:5 flex ratio set. I would like to be able to toggle doubleclick on the map to maximize it to fill the container or reset it back to the original size depending whether the List is hidden. I wrote the function below and bound it to the map's dblclick event. I see it go into this function but it has no effect on what I see. Any ideas why my list won't animate and hide?
google.maps.event.addListener(that.getMap(), 'dblclick', function () {
var list = Ext.ComponentQuery.query('#BuildingList')[0];
var height = list.getHeight();
if (list.isHidden()) {
list.show(Ext.Anim({
easing: 'easeInOut',
duration: 1000,
autoClear: false,
from: {
opacity: 0,
height: '0px'
},
to: {
opacity: 1,
height: list.getHeight() + 'px'
}
}));
} else {
list.hide(Ext.Anim({
easing: 'easeInOut',
duration: 1000,
autoClear: false,
from: {
opacity: 1,
height: list.getHeight() + 'px'
},
to: {
opacity: 0,
height: '0px'
}
}))
}
});
The best way to do this sort of thing I found was to set the flex to 0 of the list on the dblclick event (which I had to add as an override to the map), as follows:
that.addAfterListener('dblclick', function (view, map, zoomlevel, eOpts) {
var list = view.getParent().down('buildings');
Ext.Anim.run(list, 'fade', {
easing: 'easeInOut',
autoClear: false,
duration: 300,
after: function () {
list.setFlex(0);
}
});
});