为什么anime.js在vuejs中的点击不起作用？
anime.js是一个轻量级的JavaScript动画库，用于创建流畅的动画效果。Vue.js是一个流行的JavaScript框架，用于构建用户界面。在Vue.js中使用anime.js时，可能会遇到点击事件无效的问题。这可能是由于以下几个原因导致的：
- 事件绑定问题：在Vue.js中，可以使用v-on指令来绑定事件。确保你正确地将点击事件绑定到anime.js动画元素上。例如，使用v-on:click="startAnimation"来绑定点击事件。
- 元素渲染问题：Vue.js使用虚拟DOM来管理页面元素的更新。如果anime.js动画元素在Vue.js的更新过程中被重新渲染，可能会导致点击事件失效。可以尝试使用Vue.js的key属性来确保元素的稳定性，例如：<div :key="animationKey" @click="startAnimation"></div>。
- 动画执行时机问题：anime.js动画可能会与Vue.js的生命周期钩子冲突，导致点击事件无效。确保在适当的生命周期钩子中执行动画，例如在mounted钩子中执行动画。
- 其他冲突问题：如果在Vue.js中同时使用了其他动画库或插件，可能会导致冲突，从而影响anime.js的点击事件。尝试排除其他可能引起冲突的因素。
总结起来，解决anime.js在Vue.js中点击无效的问题需要仔细检查事件绑定、元素渲染、动画执行时机以及其他可能的冲突因素。如果问题仍然存在，可以进一步查看相关文档或寻求社区支持来解决该问题。
关于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体品牌商，无法给出相关链接。但腾讯云提供了丰富的云计算服务，包括云服务器、云数据库、云存储等，可以根据具体需求选择适合的产品。
相关·内容
所以我一直在玩弄Anime.js。我正在使用这一小段代码来尝试用一个字母id为a的div标记进行动画处理。
anime({
targets: "#a",
translateX: 250,
color: "#fff",
backgroundColor: "hsl(200, 50%, 50%)",
loop: true,
direction: 'alternate',
easing: 'easeInOutQuad'
});
问题是(至少对于我在Google Chr
浏览 21提问于2017-06-04得票数 2
2回答
我尝试将svg文件作为img元素包含在内，但没有成功-- anime.js无法识别svg。然后将其放入object元素中，这也不起作用。 那么，如何设置一个框架来识别svg和其中的元素呢？
浏览 48提问于2020-04-27得票数 1
我试图用<rect>动画化anime.js中的所有SVG。
只要SVG是内联的，我就可以调用querySelectorAll()或getElementsByTagName()，并将这个nodelist作为targets:的属性，所有选定的元素都将被动画化。
elements = document.querySelectorAll("rect");
动画内部代码
targets: elements,
但：当我将相同的SVG代码链接到外部SVG (嵌入<object>元素)时，anime.js停止工作(只有FireFox才能工作，仍然)。
elements2
浏览 2提问于2019-03-03得票数 0
回答已采纳
1回答
我是Js的新手，我正在尝试创建一个简单的应用程序，在动画完成后，我需要调用一个角组件函数。对于动画，我使用anime.js和角度框架来创建这个应用程序。
我在ngAfterViewInit函数中添加了动画代码，我想在完整的回调的anime.js中调用角分量的showOptions()函数。但是在完全的回调中，我无法访问这个组件函数。我试图定义组件对象comp，然后尝试在回调函数中使用这个对象来调用showOptions函数，但这会导致错误
无法读取未定义的属性“showOptions”
同样，直接调用showOptions函数也不起作用。
我的代码：
ngAfterViewInit(): v
浏览 3提问于2020-12-05得票数 1
回答已采纳
2回答
要求未在新js文件中定义。
、、、、
我想使用anime.js.来安装这个库，我需要这样做：
$ npm安装animejs -节省
const动画=要求(‘animejs’)；
我想在名为"anime.js“的js文件中写入代码。
这是"anime.js"
const anime = require('animejs');
anime({
targets: '.animeTest',
translateX: 250,
rotate: '1turn',
backgroundColor: '#FFF'
浏览 19提问于2022-06-22得票数 1
回答已采纳
1回答
我正在动画剪辑路径，这工作很棒，直到我到达safari，我需要-webkit-前缀。
我知道我可以使用css将其动画化，但我需要将变量动态分配到位置的剪辑路径中。一些在普通的老式css中做不到的事情。
这是我的anime.js对象
anime({
targets: '.contact-area',
clipPath: [`circle(0% at ${coords.centerX}px ${coords.centerY}px)`, `circle(140% at ${coords.centerX}px ${coords.centerY}px)`],
du
浏览 18提问于2019-07-31得票数 0
回答已采纳
有人知道如何在Wordpress中添加Anime.js脚本吗？有可能吗？如果有，有没有插件？
function load_my_scripts() {
wp_register_script('animejs', get_template_directory_uri() . "/js/anime.js", array(), '', true );
wp_enqueue_script('animejs');
wp_register_script('scriptjs', get_template_
浏览 6提问于2021-05-14得票数 0
1回答
在Qt中，我创建了 Quick 并使用此链接，但使用这种方式：
import "qrc:/anime-master/lib/anime.js" as Logic
Window {
visible: true
width: 640
height: 480
title: qsTr("JS")
Rectangle{
id: rec1
width: 100; height: width
color: "orange"
x: 200; y: 250
浏览 1提问于2020-09-01得票数 0
回答已采纳
我使用anime.js动画标题。它增加跨越所有的字母，使他们单独动画。在动画之后，我喜欢从文本中删除这段内容，但是删除不起作用。这是代码：
function theAnimation() {
var textWrapper = document.querySelector('.pt-animation');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
浏览 1提问于2020-03-22得票数 0
回答已采纳
我正在使用Anime.js在我正在构建的网站上做一些动画。现在我正试着用几个字来做动画。
我有动画工作，与Anime.js的一切都很好。我遇到的问题是，我想将我正在动画中的单词存储在我的反应性组件的状态中，如下所示：
this.state = {
heading: "Hudson Valley Web Design"
}
如您所见，我的标题由几个带有空格的单词组成。我通过迭代this.state.heading来实现this.state.heading效果，如下所示：
<h1 className="ml9">
浏览 1提问于2019-01-12得票数 0
回答已采纳
我想要创建一个导航栏，改变它在50 on上的徽标的不透明度，我在JS中做了一些代码，但是它不起作用，我也用anime.js制作了动画，动画作品但是不会触发50 on，你能帮忙吗？
//animation in animejs
var LogoScroll = anime({
targets: '.Logo',
autoplay: false,
opacity: 0,
duration: 400,
easing: 'cubicBezier(.75,.09,.65,.84)',
});
浏览 0提问于2019-02-12得票数 0
回答已采纳
我也试着为IE11制作一个边框动画，我想通过使用anime.js是可能的。首先，我将其设置为CSS Animation，现在尝试将其转换为anime.js。但我的问题是，我没有找到任何示例或文档中如何为背景大小设置多个值的动画。
div边框应该在屏幕边框上显示动画。
const myAnimation = anime({
targets: '#aniBorder',
easing: 'linear',
backgroundSize: [
{
duration: 1000,
value: '+=0 1
浏览 47提问于2019-07-24得票数 0
1回答
我试图使用Anime.js将圆的SVG (使用对象>复合路径>Make转换为路径)转换为正方形(转换方式相同)，但当时间线运行时，圆圈形状会被扭曲，就好像路径没有被正确地解释一样。
不过，正方形看起来还不错。
作为测试，您可以从标记中的SVG中删除shape的目标类，以防止Anime.js运行，圆圈将正确显示。
为什么Anime.js看不懂我的圆圈？
const circlePath = 'M153.1,49.5c63.2,0,114.5,51.3,114.5,114.5s-51.3,114.5-114.5,114.5S38.6,227.2,38.6,164S89.9,
浏览 3提问于2020-01-30得票数 1
回答已采纳
我有这样的动画(anime.js示例)：
anime({
targets: '.selector',
opacity: 0.5,
translateX: 200,
duration: 1,
});
然后，我需要设置这个动画的进度取决于页面滚动位置(或任何用于滚动的js库)。
例如：
在20%的滚动中，必须设置为"opacity:0.9;transform:translateX(40px);"
关于50%的卷轴- "opacity:0.75;transform:translateX(100px);"
等。
我想避
浏览 2提问于2021-09-21得票数 0
1回答
我正在试验anime.js来移动元素和动画CSS属性。我发现在动画某些属性(如left或top )时，anime.js覆盖或跳过该属性的最后一个动画。
例如，下面是一些我一直在研究的代码，我在这里看到了这种情况：
<style>
div {
position: absolute;
width: 50px;
height: 50px;
background-color: black;
}
#square {
left: 100px;
top: 50px;
}
</style>
<div id="square">&l
浏览 8提问于2021-08-28得票数 0
我真的开始和vuejs混在一起了。我遇到了多个if条件的问题。
这就是我试图让它工作的方式：
<td v-if="!editing && selectedID === user.id">{{user.name}}</td>
<td v-else>
<input type="text" v-model="user.name" />
</td>
用户点击编辑按钮并将编辑属性设置为真，然后如果下一个条件为真，它应该显示输入，但它不起作用。不知道为什么。
浏览 23提问于2019-07-12得票数 0
2回答
<template>
<div class="container" id="app">
<button @click="console.log('hello')">
Hello
</button>
</div>
</template>
<script>
export default {
name:"test",
}
</script>
<style sco
浏览 0提问于2018-08-12得票数 0
1回答
我正在使用一个名为anime.js的动画库。我需要有条件的动画链(时间线)的基础上，一些检查。例如，这是我的时间表：
const tl = anime.timeline();
tl
.add(animation_1)
.add(animation_2)
.add(animation_3);
只有当变量animation_1是true时，我才想要true，所以我
const tl = anime.timeline();
tl
.add(animation_1) // <== I need an if(a == true) on this animation
.add(a
浏览 0提问于2019-09-16得票数 1
1回答
我有一个有三个步骤的表格。每一步都应该从一边过渡到一边点击猎物/下一步。问题是，在改变方向之后，转换没有被正确地应用。有人知道为什么vue没有在改变方向之后向显示的元素中添加正确的类吗？我一直在绞尽脑汁为什么找不到解决办法。
这是一支钢笔：
过渡块如下所示：
<transition :name="transition">
<div class="register__form-step" v-if="step === 1">
Step 1
<br>
<button @click
浏览 0提问于2019-03-18得票数 2
回答已采纳
我正在尝试用Anime.js制作一个物体的动画。它有一个打开的动画(旋转)，播放一次，然后它应该有一个不同的旋转动画，无限循环。我将这两个动画放在一个时间线中，但它不会循环第二个动画。
Javascript：
var tl = anime.timeline({
easing: 'easeOutExpo',
targets: '.fles',
});
tl
.add({
rotate: 20,
duration: 750,
loop: false,
})
.add({
duration: 6000,
loop: true
浏览 72提问于2020-06-03得票数 1
1回答
我刚刚发现了anime.js，它给我的感觉就像一个适合我需要的工具(用2D动画化一些网络教程)。问题是我使用的是MathML ( HTML5标准的一部分)，它使用“数学”标记。
HTML
<math>
<mrow>
<msqrt>
<mrow>
<msup class="ml4">
<mi class="letter">b</mi>
浏览 1提问于2018-12-03得票数 0
回答已采纳
2回答
var elements = document.querySelectorAll('.content');
anime({
targets: elements,
content: 100,
}); <script src="https://raw.githubusercontent.com/juliangarnier/anime/master/lib/anime.min.js"></script>
<span class="content">50</span> 请原谅，这个代码片
浏览 44提问于2020-11-08得票数 1
回答已采纳
1回答
我还在学习VueJS，我只是想知道为什么当我点击我的按钮时，我的功能选择不起作用。created()中的所有其余部分都是正确的，但在我的方法部分，只是为了在单击事件上显示一个console.log，我有这个错误： Vue warn:在执行本机事件处理程序时出现未处理的错误 我是不是漏掉了什么？ 我只有下面的代码和CDN： <div id="main-product">
<button v-on:click="selection" type="button" class="">
浏览 18提问于2021-07-24得票数 1
回答已采纳
1回答
我正试图将anime.js加载到我的网站上，但它不起作用。我已经下载了.ZIP，并正确地将它放置在一个名为/js/和引用的子文件夹中。我甚至可以在Chrome的检查中查看源代码中的anime.min.js文件。
<body>
<div class="container">
<div class="section center">
<h1 class="title"></h1>
<section>
浏览 2提问于2017-05-17得票数 1
回答已采纳
1回答
无限动画动画
、、
我有一个无流动的模式图像，我正在使用重复的背景图像。
对于anime.js，我尝试每隔5秒执行一次backgroundPositionY: '-=10%'，但我希望它永远运行一次；而且由于图像是重复的，所以不会造成任何视觉问题。
有没有可能在不创建for循环或setInterval的情况下使用anime.js做到这一点？
anime({
targets: 'h1 > div',
backgroundPositionY: '-=10%',
easing: 'linear',
durati
浏览 3提问于2019-05-12得票数 0
根据的第一个例子：
<script>
var cssSelector = anime({
targets: '#cssSelector .el',
translateX: 250
});
</script>
<body>
<div id="cssSelector">
<div class="line">
<div class="square el"></div>
</div>
</div>
<
浏览 1提问于2018-04-03得票数 2
回答已采纳
我已经调整了这个来自anime.js文档的SVG动画示例：
我正在尝试从单词的末尾到开头绘制单词的动画。Anime.js能做到这一点吗？direction: 'reverse'不能像我希望的那样工作。它以相反的方式制作动画，但以完整的svg开始，以空结束。
我也有一个想法，如果动漫不能做到这一点，是不是有一个解决方案，以反向重新绘制SVG？
感谢所有人！:-)
浏览 6提问于2021-01-12得票数 2
function goBottomRight(){
anime({
targets: '.btn',
translateX: 240,
translateY: 320,
easing: 'easeInOutQuad'
}).play;
}
<button class='btn' onclick='goBottomRight()'>Click Me</button>
<script src="https://cdnjs
浏览 0提问于2019-03-27得票数 0
回答已采纳
我试图创建一个动画(使用anime.js)，在用户开始键入时播放一次动画时间线，并在用户输入框中键入的时间内循环。当用户停止输入时，动画将完成其当前循环并停止播放。
下面是我目前的进展，您可以观察到动画工作不正确：
下面是我的anime.js代码时间线：
var basicTimeline = anime.timeline({
loop: true,
autoplay: false,
duration: 700
});
basicTimeline
.add({
targets: '#circ1',
duration: 100,
tran
浏览 3提问于2018-05-08得票数 1
回答已采纳
我有两个svg三角形，我正在尝试用anime.js对它们进行变形。我遇到的问题是，在给定的开始和结束坐标之间，图形完全跳到了其他地方，我不知道为什么。 这是起始位置： ? 这是结束位置： ? 这就是坐标在没有任何原因的情况下跳到的地方： ? 以下是我的示例代码。您可以通过单击按钮来启动它。 https://codepen.io/saitam1/pen/draKLb
浏览 23提问于2019-03-24得票数 0
回答已采纳
我已经在HTML文件中添加了CDN，但是仍然不能工作，为什么？
"use strict";
anime({
targets: '#ball',
translateX: 250
});
body{
margin:0;
height: 100vh;
}
#ball{
border: black solid medium;
background-color: cyan;
width: 2%;
height: 2%;
border-radius: 50%;
}
<!DOCTYPE
浏览 2提问于2021-06-03得票数 0
2回答
我试着做一个旋转块，它的转速由<input type="range"控制。问题是我找不到解决方案，当速度更新时，不会重新启动动画。
我尝试了三种变体：
直接设置CSS动画速度由JS。-重新启动动画；
jQuery的animate -不适用于转换；
库anime.js -它有速度变化的方法，但它也重新启动动画(或者只是块跳转，还不清楚)
什么方法允许通过JS动画创建平稳的变化？
let block = anime({
targets: '#transforms .block',
rotateY: '360'
浏览 3提问于2018-04-24得票数 4
我将bootstrap popover与vuejs结合使用。
如何触发vue功能？
在下面的代码中，当我单击add break链接时，它用click me按钮打开bootstrap popover。现在vuejs不起作用了，如果我点击click me，它就不会提示警报。
<a data-toggle="popover" data-placement="top" v-d2d-popover data-content='<button v-on:click="alert(6)">click me</button&g
浏览 4提问于2016-02-05得票数 1
1回答
我想有属性tblid从button元素，当点击事件被触发。 我正在阅读像this这样的问题，但它不适用于我->下面的例子。 对我来说很奇怪的是，e.target或e.currentTarget会返回包含所有属性的元素，包括tblid。为什么在vuejs中很难从元素中获取这些属性？ 请注意:我知道我可以创建组件并在该组件上使用道具。但我真的不想为每个html元素创建组件，比如按钮、标签、输入…… html： <div id="app">
<button tblid="tbl1" @click="buttonClick(
浏览 14提问于2019-12-10得票数 0
回答已采纳
1回答
我从anime.js转到了velocity.js，试着用延迟不透明的方式来保护简单的动画。为此，我用的是错开。但是如果我在里面放了一个延迟延迟的函数，我就没有延迟的雄鹿动画了。每一篇文章都会出现，但并不是动画片和延迟。在第一篇文章中，我尝试了用anime.js制作动画的方法，第二种方法是直接使用。
这里还有我的jsbin：
var greenElem = $('.pointGreen');
var yellowElem = $('.pointYellow');
var redElem = $('.pointRed');
setInterval
浏览 0提问于2019-02-22得票数 0
回答已采纳
我已经使用npm install animejs在npm中安装了animejs
<script>
import anime from 'animejs';
let heroTimeline = anime.timeline({autoplay: true});
let heroAnimation = {
targets: "#hero grow",
opacity: {
value: [0, 1],
duration: 800,
浏览 7提问于2021-11-12得票数 2
我有这样的代码： <template>
<div id="app">
<span
contenteditable="true"
spellcheck="false"
style="width: 800px; display: block"
:v-text="textEl"
@focus="focused = true"
@blur="focused = false"
浏览 15提问于2020-12-27得票数 0
回答已采纳
2回答
我试着在上传之前预览一张图片，我想拆开一张小的图片，然后点击变成完整的大小，但是直到现在它还没有工作。我正在使用，来自他们的file.thumb也不起作用。
data() {
return {
url:null,
}
}
watch: {
files: {
handler: function(){
this.files.forEach((file,index) =>{
const file = e.target.file[0];
this.
浏览 4提问于2020-02-06得票数 0
下面是我的密码。我想在提交过程中验证该表单。我阻止提交行动，直到所有的数据是有效的。因此，我使用了"validata ()“方法。如果表单有空/无效日期，它应该警告“未提交”.Else它应该警告“提交”。我的问题是，当我第一次点击提交按钮时，警报显示为“提交”而不是“未提交”。但是，当我第二次或更远地单击相同的按钮时，它将正确显示为“未提交”。我不知道原因，为什么它在第一次不起作用。
<template>
<div id="app">
<h1>Add Items</h1>
浏览 1提问于2018-05-03得票数 0
1回答
无法运行动画JS
、、
我知道这个问题已经发布了，但是我没有发现任何可以帮助我解决问题的方法。这里是:我想用AnimeJS在我的网站上创建一些动画，但是我无法运行最简单的动画，甚至那些来自anime.js文档和示例的动画。
我找到了一个有同样问题的人，并在文档加载后通过运行代码解决了这个问题，但在我的例子中，它似乎不是解决方案n。我使用npm安装了anime.js，在我的页面上只使用了这个和Jquery。下面是带有文档示例的代码：
$(document).ready(function() {
var cssSelector = anime({
targets: '#cssSelector .e
浏览 5提问于2021-03-22得票数 0
我想用@click.middle捕捉鼠标中键点击事件，但似乎什么也没发生。有人知道为什么吗？
<div id="root">
<button @click.middle="test()">
Click Me
</button>
</div>
new Vue({
el: '#root',
methods: {
test () {
alert('me')
}
}
})
在他们的文档中，他们明确表示使用@click.middle
浏览 46提问于2017-07-07得票数 2
回答已采纳
2回答
VueJs重装力部件
、、、、
我想要一个子组件在每次对象发生变化时重新加载，我将其作为支柱传递给子对象。我读到VueJs无法检测到对象中的变化。到目前为止，我想出了以下的想法：
每次我的对象发生变化时，我都会在一个普通变量中执行一个更改，这个变量也是通过一个道具传递给孩子的。我的想法是通过正常变量的改变来“强制”一个子组件的重命名。但它似乎不起作用，我也不明白为什么它不起作用。
父档案：
<template>
<compare-value :ocean="ocean" :update="updateComponent" v-if="ocean.length >
浏览 4提问于2020-11-17得票数 1
回答已采纳
我真心希望您的帮助！我是一个初学者，这是我创建web应用程序的第一次经验。 我使用Vue Cli，有一个lottie元素，应该通过点击(我做到了)，然后我应该去“其他页面”(我做到了)，但是，我如何实现过渡到页面后，动画完成？帮助!不客气!对于动画，我使用Anime.js <script>
import { translate } from '../js/animate'
export default {
methods: {
go () {
translate(this.$refs.square)
this.$route
浏览 22提问于2020-07-13得票数 1
回答已采纳
我如何在我的内容中建立网址的可点击链接？
假设您有一段代码{{post.caption}}，它返回一个段落，如下所示：
Lorem ipsum dolor .Numquam sunt no谱nihil，illum nam ipsam at，ratione，
我希望https://google.com自动链接。
有什么建议吗？
更新
我刚刚注意到，线制动器的标题数据使用\n\n和\n，它以文本形式附加在url上，所以基本上是这样的：
Lorem ipsum dolor .Numquam sunt\n nno谱nihil，illum nam ipsam at，ratione，\n n
这是
浏览 7提问于2022-12-02得票数 0
1回答
在我的VueJS应用程序中，我有多个页面(视图、组件)，它们从一些WebApi加载单独的数据。响应数据应该缓存在VueJS应用程序中，直到用户显式地点击“清除缓存”按钮。 在每个组件的" data“成员中存储响应数据不起作用，因为在使用vue-router在页面中导航时会重新创建组件。 我知道vuex用于存储应用程序状态，但它似乎更像是应用程序中央存储，而不是组件本地存储。我看到vuex存储可以模块化，但一个组件的状态仍然可以被不同的组件访问。 推荐的存储方式是什么(私有？)VueJS组件中的数据/状态，以便在页面导航中幸存下来？
浏览 13提问于2021-07-22得票数 0
1回答
vuejs 3组合API
、、、
有人知道为什么变量数在单击它时不显示最新值？我试过使用onMounted，但似乎什么也没做。当我点击段落时，它总是显示1。我希望它显示最新的数字。有什么想法吗？
<script setup>
import TheWelcome from '@/components/TheWelcome.vue'
import { onMounted, ref } from 'vue'
import axios from "axios"
let number = 1;
function getCurrentNumb
浏览 6提问于2022-05-21得票数 -1
1回答
我不明白为什么vuejs的观察不能在一个非常简单的场景中工作。当模型"asker“被更新时，计算的道具应该自动地将值更新为3。为什么这不起作用？小提琴在这里，
<div id="simulator">
<c-simulator-form v-bind:subject="asker"></c-simulator-form>
</div>
Vue.component('c-simulator-form', {
props: ['subject'],
template:
浏览 0提问于2017-08-18得票数 0
回答已采纳
1回答
我在做什么
我使用在svg中沿路径绘制一些圆圈。我使用Vue创建路径，因为我希望顶部的圆圈在底部结束，所以它不能只是一个静态SVG。
我所期望的
我期望圆圈从svg路径的一端开始，在另一端结束。
到底发生了什么，
我在这里有一个演示：
当我点击动画，圆圈跳到一个不同的位置，然后几乎正确的动画，然后在错误的地方完成。
这是我为anime.js使用的代码：
for(var c = 0; c < this.coins.length; c++){
var path = anime.path('#path-'+ c);
anime({
targe
浏览 0提问于2018-02-22得票数 0
我正在遵循reverseKey 的文档
下面是我的代码：
<div class="one-table-row row-with-data row" v-for="message in messages | orderBy orderKey reverse |filterBy searchKey | offset offset | limit perpage">
// ...... other code
</div>
我的ViewModel：
data: function(){
return {
// othe
浏览 1提问于2017-03-06得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
