Как мне сохранить мою v-модель после того, как JQuery заменит мою DOM?

Я пытаюсь создать графику движения для 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 новой, и поэтому я не могу больше менять текст на лету. Тем не менее, я не могу на всю жизнь понять, как решить или обойти эту проблему.

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;
                    }
                  });               
            }
        }
    });
}

Я ожидаю, что мой текст полностью анимирован, и я могу настроить его на лету.

Спасибо.

0 ответов

Другие вопросы по тегам