Question

我正在尝试为OBS创建运动图形，我需要在可以随时更改的内容上创建它。我通常使用After Effects / JavaScript，而不是HTML / CSS。

我正在使用Vue进行此操作，我尝试拼接一些在网上找到的代码，大部分情况下效果很好，但是我正在努力使Vue和JQuery一起工作。

我在某种程度上了解问题所在：

$('#name').each(function(){                  
   $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

这用新的DOM替换了原来的DOM，因此我不能再随意更改文本了。但是，我一生无法解决该问题。

window.onload = () => {
    new Vue({
            el: '#vue-app',
            data: {
                name: 'Didier Drogba',
                subtitle: '@HelloWorld',
                transition_in: 1200,
                transition_out: 1100,
        },
        methods: {
            animate() {
                $('#name').each(function(){
                    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
                });

                anime.timeline({loop: true})
                  .add({
                    targets: '#name .letter',
                    translateX: [40,0],
                    translateZ: 0,
                    opacity: [0,1],
                    easing: "easeOutExpo",
                    duration: this.transition_in,
                    delay: function(el, i) {
                      return 500 + 30 * i;
                    }
                  }).add({
                    targets: '#name .letter',
                    translateX: [0,-30],
                    opacity: [1,0],
                    easing: "easeInExpo",
                    duration: this.transition_out,
                    delay: function(el, i) {
                      return 100 + 30 * i;
                    }
                  });               
            }
        }
    });
}

我希望输出的是我的文字完全动画，并且可以即时调整。

谢谢。

JQuery替换DOM后如何维护我的v模型？

0 个答案: