animation动画,切换到select状态后动画失效
【Bug/建议】xxxxxxxxxxx 标题 xxxxxxxxxxxxxx
环境:电脑 + window 11 + chrome 131 + leaferjs 1.4.2
` // #自定义状态 [切换状态] import { Leafer, Rect } from 'leafer-ui' import '@leafer-in/state' // 导入交互状态插件 import '@leafer-in/animate' // 导入动画插件
const leafer = new Leafer({ view: window })
const rect = new Rect({ width: 100, height: 100,
cornerRadius: 30,
origin: 'center',
states: { // 自定义状态列表 //
color: { fill: 'white' },
rotate: { fill: 'yellow' },
ra: {
stroke: '#32cd79',
strokeWidth: 5,
dashPattern: [10, 10], // 绘制虚线 //
dashOffset: 0,
animation: { // 虚线动画
style: { dashOffset: -20 },
easing: 'linear',
duration: 0.5,
loop: true,
}
}
}, selectedStyle: { stroke: 'red' }, selected: false, state: 'ra', // 设置状态 transition: 1 })
leafer.add(rect)
rect.on('click', () => { // 点击切换状态 // rect.state = rect.state === 'color' ? 'rotate' : 'color' })
setTimeout(() => { rect.selected = true }, 2000)
setTimeout(() => { rect.selected = false setTimeout(() => { },200) }, 4000) `
目前只要是切换状态animation就会失效(防止切换状态后属性相互影响,无法还原,后期我们在看看有没有优化的方案),想不失效可以单独用new Animate的方式创建动画。