vue 复选框提交列表过渡

vue 如何实现输入文本框内容 添加列表信息 并添加过渡动画效果
不透明度变小的过渡动画

使用CSS3中的@frameKey和animation属性。

<transition-group name="list" tag="ul">
  <li v-for="(item, index) in listData" :key="index">{{ item }}</li>
</transition-group>

.list-enter-active, .list-leave-active {
  transition: opacity 0.5s;
}
.list-enter, .list-leave-to {
  opacity: 0;
}

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7807411
• 这篇博客也不错, 你可以看下vue数组双向绑定问题（数组更新检测、对象添加移除属性）
• 除此之外, 这篇博客: vue 回车键输入框获取焦点自定义指令中的 回车键输入框获取焦点自定义指令 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 直接在main.js挂载.组件用v-enterDownNext 贼好用

  Vue.directive('enterDownNext', {
    inserted: function (el) {
      let inputs = el.querySelectorAll('input')
      // 绑定回写事件
      for (var i = 0; i < inputs.length; i++) {`在这里插入代码片`
        inputs[i].setAttribute('keyFocusIndex', i)
        inputs[i].addEventListener('keydown', (ev) => {
          if (ev.keyCode === 13) {
            let targetTo = ev.srcElement.getAttribute('keyFocusTo')
            if (targetTo) {
              this.$refs[targetTo].$el.focus()
            } else {
              var attrIndex = ev.srcElement.getAttribute('keyFocusIndex')
              var ctlI = parseInt(attrIndex)
              // console.log(ctlI)
              if (ctlI < inputs.length - 1) {
                setTimeout(() => {
                  inputs[ctlI + 1].focus()
                },500)
              }
            }
          }
        })
      }
    }
  })
  

• 您还可以看一下 徐照兴老师的Vue全家桶零基础入门到进阶项目实战第一篇入门准备实操篇课程中的 系列课程介绍小节, 巩固相关知识点