Как мне сохранить мою 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;
}
});
}
}
});
}
Я ожидаю, что мой текст полностью анимирован, и я могу настроить его на лету.
Спасибо.