Question

有没有人知道为什么我的css过渡会在事件监听器中工作？如果我直接调用它就行了。当我在事件监听器中调用它时它不起作用

let start_session = ()=>{
  let pomodoro = set_up()  
  let _pomodoro_container = pomodoro_container()
  let _session_ui = session_ui()
  let time_init = gms(pomodoro.clock.work.time)
 // console.log(time_init)
  update(pomodoro,time_init.min,time_init.sec)

  //works
 // trigger_anim()

  _pomodoro_container.addEventListener('click',()=>{
  //does not work
    //trigger_anim()
    if(pomodoro.state.state==pomodoro.states.before_start||pomodoro.state.state==pomodoro.states.paused)
      start(pomodoro)
    else pause(pomodoro)
  },false)

  _session_ui.work.up.addEventListener('click',()=>{ 
    let value = (Number(_session_ui.work.div.dataset.work)+1)
    _session_ui.work.div.dataset.work = value
    _session_ui.work.display.firstChild.textContent =value
    reset_on_update(pomodoro)
  },false)

  _session_ui.work.down.addEventListener('click',()=>{
    let value = (Number(_session_ui.work.div.dataset.work)-1)
    _session_ui.work.div.dataset.work = value
    _session_ui.work.display.firstChild.textContent =value
    reset_on_update(pomodoro)
  },false)

  _session_ui.break.up.addEventListener('click',()=>{
    let value = (Number(_session_ui.break.div.dataset.break)+1)
    _session_ui.break.div.dataset.break = value
    _session_ui.break.display.firstChild.textContent =value
    reset_on_update(pomodoro)
  },false)

  _session_ui.break.down.addEventListener('click',()=>{
    let value = (Number(_session_ui.break.div.dataset.break)-1)
    _session_ui.break.div.dataset.break = value
    _session_ui.break.display.firstChild.textContent =value
    reset_on_update(pomodoro)
  },false)

  return pomodoro
}

let trigger_anim =()=>{
let _pomodoro_container = pomodoro_container()
  insert_style_sheet_with_rule("div._test{transition:background 6s ease}")
  _pomodoro_container.classList.add("_test")
}

该类确实被添加到div中，但转换不会触发。

其他css proeprties，比如说背景或边框确实会改变

let insert_style_sheet_with_rule = (rule)=>{
  let new_style = document.createElement('style')
  style.replaceWith(new_style)
  style = new_style
  style.sheet.insertRule(rule,style.sheet.cssRules.length)
}

我正在插入样式表，因为我需要能够更改过渡的长度，并且无法简单地添加/删除类

单击时添加类不会触发CSS转换

0 个答案: