import { ref } from "vue";
const promos = {
"50%": 0.5,
sale: 0.1,
};
export default {
name: "App",
setup() {
const params = new URLSearchParams(window.location.search);
const promo = params.get("promo");
const percent = promos[promo] || 0;
const price = 100;
return {
price: ref(price - price * percent),
};
},
};transition надо было ставить до сброса трансформации. Есть по анимациям цикл видео.
requestAnimationFrame-вариант приложил в ответ. Работало "так" потому, что Вы убирали прошлую трансформацию.
el.style.transform = 'translate(-100%, 0)';
c.onclick = function() {
el.style.transition = '10s';
el.style.transform = 'translate(0, 100%)';
}setTimeout вот так:el.style.transform = '';
setTimeout(() => {
el.style.transition = '10s';
el.style.transform = 'translateY(100%)';
});requestAnimationFrame не нужен, достаточно будет того же setTimeout. Как уже говорили, requestAnimationFrame нужен для покадровой анимации (в примере я использовал линейную интерполяцию и функцию плавности). На счёт второго варианта - моё мнение таково, что если с задачей справляется CSS - то уж лучше его использовать. На счет хака через высчитывание значений не знал. Также, во втором варианте изначальное положение элемента можно задать при помощи position / margin, тогда, при нажатии на другой элемент можно при помощи JS устанавливать новую координату и запускать анимацию.
export const ConditionsSettings: React.FunctionComponent = () => {
const [condition, setCondition] = useState(1)
const [activeConditionType, setActiveConditionType] = useState(1)
const dispatch = useDispatch()
const conditionsSettingsTypes = useSelector((state: RootState) => state.conditionsSettings.data)
const conditionsSettingsTypesValues = useSelector((state: RootState) => state.conditionsSettingsTypesValues.data)
const conditions = useSelector((state: RootState) => state.conditions.data)
const currentConditions = conditions.filter((item: Conditions) => item.id === activeConditionType)
const activeConditionTypeHandler = (key: any) => {
setActiveConditionType(key)
}
const conditionHandler: any = (key: number) => {
setCondition(key)
}
useEffect(() => {
dispatch(loadConditionsSettings())
}, [])
useEffect(() => {
dispatch(loadConditionsTypesValues(condition))
}, [condition])
useEffect(() => {
dispatch(loadConditions())
}, [])
return (
<>
<Tabs centered onChange={activeConditionTypeHandler}>
{conditionsSettingsTypes.map((item: ConditionsSettingsTabe) => (
<TabPane tab={item.description} key={item.id}>
{conditionsSettingsTypesValues.map((item: ConditionsSettingsTypesValues) => (
<Checkbox key={item.id}>{item.description}</Checkbox>
))}
</TabPane>
))}
</Tabs>
<Tabs onChange={activeConditionTypeHandler}>
{currentConditions.map((item: Conditions) => (
<TabPane tab={item.description} key={item.id} />
))}
</Tabs>
</>
)
}
Можно решить и без создания circluar map'ы. Сразу на этапе сборки искать нужного соседа, поворачивать и идти дальше.