1回答
用Vue.js制作CSS动画
、、、、
我在学Vue Js。
实际上，我正在用SCSS和Vue Js制作一个聊天示例应用程序。
在我的项目中，我决定将一些CSS动画设置为“消息”框。
下面是动画代码的片段：
SCSS：
.push {
...
animation-duration: 0.3s;
animation-timing-function: linear;
animation-fill-mode: forwards;
&.received {
...
animation-name: inFromLeft;
}
&
浏览 2提问于2021-09-25得票数 0
回答已采纳
1回答
我在Laravel中使用VueJS，当我包含VueJS时，页面看起来就像是在加载Vue时被重新解析/重新渲染，导致我所有的CSS动画(在页面加载时触发)再次播放。我已经检查了页面是否实际加载了一次(通过使用console.log()检查重复项和查看HTTP请求，每个请求都被调用一次)。
当查看性能跟踪时，您可以看到它何时发生，但我不确定原因或原因，也不确定在哪里进行调试。
请注意，背景是动画的，但徽标不是；因此徽标保持可见，但动画会重新触发。
app.js (Vue入口)
require('./bootstrap');
window.Vue = require('
浏览 16提问于2019-11-06得票数 0
1回答
我有一个sectionHeader.vue组件，我想在很多不同的页面上使用它。在该sectionHeader.vue内部是一个<canvas>元素(用于一些健壮的three.js动画)，我希望通过道具动态地更改每个标题的内部。我想利用Vue固有的代码分割优势，使每个页面不加载其他页面的动画js代码，只加载与其相关的代码。
我试图在使用时动态加载它，但我不认为这是我想要的.
我的文件夹结构：
components
animations
robust-animation-1.vue
robust-animation-2.vue
maybe-like-15-m
浏览 2提问于2019-11-12得票数 4
回答已采纳
好的，这是一些我很难理解的基本Vue：
我正在尝试从一个可以在线获得的动画API中获取一些数据(动画)
我有Anime.vue (它是视图页)和getAnime.js (它包含函数)。当我在Anime.vue文件中使用该函数时，它正常工作，但我试图将它分开，现在我无法将动画发送到vue页面。下面是代码：
Anime.vue (只包括脚本部分)
<script>
import getAnime from "../composables/getAnime";
export default {
data() {
return {};
},
setup
浏览 6提问于2021-12-09得票数 1
1回答
我尝试在Vue.js中动态绑定CSS的animation属性，以便根据其他变量更改动画。我的实现如下： <template>
<div>
<div :style="{transform: getTrans(), animation: getAni()}">Test</div>
</div>
</template>
<script>
import Vue from "vue";
export default {
nam
浏览 29提问于2019-01-24得票数 0
1回答
有没有办法用vue.js动画将图像动画到某个特定的div？
我基本上想实现一个“添加到购物车”动画，当访问者点击“添加到购物车”的那一刻，产品的图像移动到购物车图标，然后消失。当图像在移动时，它的大小应该越来越小。
vue动画可以做到这一点吗？
浏览 1提问于2019-03-09得票数 1
下面是我的App.vue代码：
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
import 'material-design-lite'
export default {
name: 'app'
}
</script>
<style lang="stylus">
@import url
浏览 4提问于2017-09-29得票数 1
我使用的是Vue的Material Design框架，但是当我向页面添加一个文本字段时，动画可以工作，但下划线不会显示。
我在main.js文件中添加了以下内容：
import 'vue-material/dist/vue-material.min.css'
import {MdField, MdButton} from 'vue-material/dist/components'
浏览 0提问于2018-12-08得票数 0
我在我的项目中使用Vue.js和Laravel，最近我使用一个名为Lottie的插件添加了两个动画。每个动画都是一个组件，它们都使用一个单独的JSON文件来动画一组PNG图像(类似于PNG序列)。这两个JSON文件在本地存储在路径/public/data/.下的项目文件夹中
首先，JSON文件不会被读取，除非我输入了绝对路径，(/users/username/documents/projectname/public/data/filename.json)，是不可能通过使用/data/filename.json使其工作的
其次，当我在组件中添加下面的代码时，我的JS文件会像预期的那样被编译成不同
浏览 5提问于2020-02-10得票数 1
回答已采纳
我试图通过使用获得一个使用Vue的Lottie动画，并且我遵循了，但是当我尝试运行代码时，我在控制台中看到了以下错误：
[Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'length')"
found in
---> <Lottie> at node_modules/vue-lottie/src/lottie.vue
<VSheet>
<TheTh
浏览 20提问于2021-11-13得票数 2
1回答
我使用的是bootstrap 5。 我有这个a元素： <div class="mb-3">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseTicket" id="scrollDown" role="button" aria-expanded="false" aria-controls="collapseTicket">
نوشتن
浏览 26提问于2021-06-30得票数 0
回答已采纳
1回答
我正在学习Vue.js，作为练习，我正在开发一个SPA。我通过组件递归地添加一些图标作为imgs。(为了关注这个问题，省略了很多代码)
Vue.js
Vue.component('icon', {
template:
'<img id="logo-icon" v-on:mouseover="animation"
class="platform_button" width="50" height="50"
src="../assets/img
浏览 1提问于2017-06-08得票数 3
回答已采纳
我用vue-cli webpack建立了一个vue.js项目.我想在我的项目中使用Greensock动画插件，所以我运行了
npm install greensock --save
它已经安装好了。
在main.js文件中我添加了
import { TweenMax } from "greensock"
我不知道这是否使Greensock插件可用，因为我在组件文件中的Tweenmax.to ...中有语法错误
export default {
name: 'HelloWorld',
el: '.hello',
data () {
浏览 1提问于2017-11-27得票数 2
回答已采纳
1回答
Vue-Dragula不显示动画
、、、、
我只是在试验，这就是我所做的：
let vm = new Vue({
el: '#wrapper',
data: {
colOne:["hi", "you"]
},
methods:{
onClick:function(){
alert()
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></sc
浏览 25提问于2021-02-21得票数 0
回答已采纳
4回答
一开始，我是css初学者，我试着为一些项目制作vue.js动画，效果很好，但我的动画做错了。
-We有按钮可以将元素随机添加到数组中
-We可以单击元素来删除它。
问题：
-The动画总是在最后一项上运行
我希望vue js应该在添加或删除的项上应用动画。
导致动画出错的代码中有什么错误?？
要使动画正确工作，我应该更改或添加什么？
new Vue({
el: "#app",
data: {
myNumbers: [1, 2, 3, 4],
highestNumberInMyNumbers: 4
},
methods: {
addNu
浏览 7提问于2017-04-24得票数 18
回答已采纳
我需要为vue.js SPA应用程序添加一个预加载动画，同时在后台加载文件，使用SVG和进度条。因此，用户看到的不是空白屏幕，而是动画。像gmail加载动画或之类的东西谢谢你的建议
浏览 1提问于2019-02-07得票数 0
1回答
我一使用new Vue(...)，svg动画就不起作用了。 我找不到其他有同样问题的人...尽管大多数动画都是直接使用Vue.js实现的 我在anime.js上试过了，但它也不能和vue.js一起工作。有没有人知道解决这个问题的办法？ 不使用Vue.js toBars = document.getElementById("toBars");
toCross = document.getElementById("toCross");
isBars = true;
document.getElementById("start").onclick
浏览 19提问于2020-07-21得票数 0
1回答
我有一个这样的页面：
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>
<a href="#" @click="currentView='create'">Create</a>
浏览 1提问于2017-11-01得票数 0
1回答
我想根据用户的动作动态地改变动画的类型。因此，例如，当单击第一个按钮并将离开动画命名为"hello“元素时，应该使用bounceOutRight动画。但是，如果用户单击第二个按钮，"hello“元素应该使用bounceOutLeft动画。这个例子来自vue.js ，我正在尝试对它进行扩展。与vue示例一样，它使用animate.css库。
我尝试使用v-bind:leave class=“动画bounceOutRight”，但这会将错误抛出无效表达式。
<button @click="show = !show">
Toggle Bounce Ri
浏览 3提问于2016-12-18得票数 6
回答已采纳
1回答
当line改变时，我想要动画(淡入/淡出)下面的div：
<div v-text="line"></div>
下面是按一定时间间隔更改line数据的js代码。
setInterval(()=> {
this.line = this.randomString();
}, 10000);
我知道如何使用v-if进行隐藏/显示。但是如何在数据更改时使用Vue.js来为span或div设置动画呢？
浏览 1提问于2017-05-10得票数 2
我使用vue.js将数组呈现到列表中。
列表中的每一项都有一个数值，当该值发生变化时，我希望使用一个动画。
动画示例：
现有的价值消失，新的价值逐渐消失。
价值背后的黄色背景逐渐褪色。
文字颜色发生变化，然后又退去原色。
我该怎么做？
HTML
<div id="app">
<ul>
<li v-for="user in users">
{{ user.name }} = {{ user.value }}
</li>
</ul>
<bu
浏览 0提问于2017-03-01得票数 46
回答已采纳
1回答
我最初安装了Tailwind CSS，然后在我的项目中间，我决定尝试Vuetify。用vuetify-loader安装后，vuetify运行良好，但样式不起作用。例如，当我单击按钮时，按钮的动画是有效的，但是按钮的颜色不是蓝色，而是变成灰色。
但是当我使用vue组件
<template>
<v-app>
...
</v-app>
</template>
你知道我怎么把它们分开吗？
以下是一些信息：
"tailwindcss": "^1.4.5",
"vuetify":
浏览 6提问于2020-05-26得票数 1
1回答
我已经在一个旧的香草js应用程序中创建了这个效果。我有一系列有悬停动画的块，当没有悬停时，动画会一个接一个地循环。
我已经用Vue js重新构建了整个应用程序，其他的一切都变得简单多了。这是我在没有dom操作的情况下努力做到"Vue“的应用程序中唯一的部分。基本上，我有一个3秒的超时时间，组件获取“活动”类，然后类切换到v-for中的下一个组件。
有什么建议吗？
浏览 1提问于2019-10-17得票数 0
1回答
我试图在页面加载时使用API中的数据动画元素的宽度，我使用的是Vue js。我所做的就是使用内联css并应用宽度值(来自API数据)。我可以添加元素宽度，但它没有动画。
编辑的Vue模板：
<li v-for="(stats, index) in teamStats[0]">
<div class="bar">
<span :style="'width:'+ stats +'%;'">
{{stats}}
</
浏览 2提问于2017-07-11得票数 1
回答已采纳
2回答
我正在尝试使用Vue.js动画来对列表进行排序，但并不是所有的项都是动画的。你知道为什么吗？以及如何让它工作呢？
new Vue({
el: '#app',
data: {
reverse: 1,
items: [
{ name: 'Foo' },
{ name: 'Bar' },
{ name: 'Baz' },
{ name: 'Qux' }
]
}
})
.moving-item {
transition: all 1
浏览 7提问于2015-09-05得票数 4
回答已采纳
我把jsfiddle上的片段链接起来，因为阻塞路由
我在浏览视图组件时添加了一个路由器过渡动画。
const One = {
template: '<div>Home</div>'
}
const Two = {
template: '<div>Foo</div>'
}
const router = new VueRouter({
mode: 'history',
routes: [{
path: '/',
component: One
浏览 2提问于2020-10-06得票数 0
回答已采纳
1回答
我有一个后端渲染的页面(如果重要的话，是django)，我想使用来自PrimeVue的一些组件和打包为vue组件的markdown编辑器来增强它。现在，我们有一些使用jquery的小动画，对于这些动画，我们将来自CDN的jquery直接包含到我们的页面中。几个月前，我们需要使用更多的客户端交互性来增加页面的趣味性，我们通过CDN将vue.js包含到该页面上(删除jquery)，然后在index.js中编写一些javascript，我们也从CDN加载并完成了我们的工作。这就是目前的情况。该页面当前如下所示 <html>
....
<script src="htt
浏览 9提问于2020-09-15得票数 0
回答已采纳
我真心希望您的帮助！我是一个初学者，这是我创建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
回答已采纳
我刚刚创建了一个新的离子vue应用程序(标签模板)，并注意到在交换模式到ios后，路由动画已经消失。
有了md，一切都很好。
我的index.html
<!DOCTYPE html>
<html lang="en" mode="ios">
<head>
<meta charset="utf-8" />
<title>Ionic App</title>
同样，当路由时，控制台中会弹出此错误。
TypeError: Cannot set property &#
浏览 2提问于2021-05-05得票数 1
回答已采纳
2回答
在Vue with Vuetify中，我想用animate.css动态更换V卡，但我正面临一个问题。out-in模式不希望在这种情况下工作。淡入和淡出动画同时移动。如何强制它在结束淡入之后开始淡入动画？
new Vue({
el: '#app',
data() {
return {
number: 1,
items: [
{
text: "a",
number: 1
},
{
text: "b",
浏览 25提问于2019-08-12得票数 0
回答已采纳
1回答
new Vue({
el: '#app',
data: {
visible: true
}
})
.a, .b {
height: 50px;
width: 50px;
background: red;
}
.b {
background: blue;
transition: 1s;
}
<script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script>
<div id="app">
<div c
浏览 0提问于2017-09-29得票数 1
我想在vue.js中使用enter/ want ，使用内置的javascript钩子进行转换：
我选择的动画库是GSAP：
同时，我的enter函数enter: function(el, done) {}和leave函数leave: function(el, done) {}都被正确调用。
enter动画工作得很好--但是左边的动画没有做任何事情。
我想这是一个与GSAP相关的事情，我还不明白。我尝试重置动画和清除动画元素的内联样式。帮不上忙。
以下是代码：
浏览 2提问于2017-09-30得票数 1
回答已采纳
我正在做一个Vue.js项目，我被困在标题导航栏的一个小动画上。
我想听用户滚动事件和淡入和淡出导航栏，如果用户滚动，淡入和如果用户滚动回顶部:0淡出，并显示全屏介绍没有导航栏。导航在顶部是固定的/粘稠的。
我如何使用Vue.js来完成这个任务呢？
为了获得更好的可视化：
浏览 2提问于2018-09-28得票数 3
回答已采纳
只是付了一个商业执照，并试图跟随文档，但无法使动画工作
我用的是Laravel 5.4和Vue 2
<head>
<link rel="stylesheet" href="/css/animate.min.css" />
</head>
<body>
<div id="app">
@yield('content')
</div>
<script src="/js/app.js"></script&
浏览 1提问于2017-03-23得票数 0
回答已采纳
1回答
我期待动画新元素的外观和旧元素的消失，当你改变一个v视图元素绑定到的组件。但是，由于更改ViewModel实际上破坏了DOM元素，这似乎不起作用(这些框在消失时应该会褪色/缩小)：
var vm = new Vue({
el: "#container",
data: {
currentView: ""
}
});
Vue.component("red", {
template: "<div class='red box' v-transition></div>"
浏览 0提问于2014-10-01得票数 1
回答已采纳
2回答
我试图添加一些背景mp4/gif动画到我的网页，但由于某些原因，它不工作-它只显示一些黑色的占位符(似乎)的动画。 这是我尝试使用的库：https://github.com/pespantelis/vue-videobg 按照说明进行操作后，我得出了以下结论(仅显示相关部分)： main.js文件： // eslint-disable-next-line import/extensions
import VideoBg from 'vue-videobg';
Vue.component('video-bg', VideoBg); Comp.Vue组件文件：
浏览 54提问于2021-09-19得票数 2
回答已采纳
我用VueJS制作了一个简单的todo应用程序。我还添加了vue2 2-动画(一个Vue.js 2.0端口的Animate.css。用于Vue的内置过渡。)添加一个元素的动画工作正常。
但是有两个问题我想在没有不必要的编码的情况下解决
动画显示的列表，从本地存储工作下载的所有项目同时。我需要动画顺序工作为每个项目分开。
删除一个项目的动画不正确-最后一个项目总是被删除，然后转移。
P.S.：查看JSFiddle中的演示，因为本地存储不能在这样的片段中工作。
Vue.component("adder", {
data: function() {
r
浏览 0提问于2019-03-12得票数 1
回答已采纳
1回答
我试图用一些动画删除一个列表项，问题是如果删除的项是最后一个，它工作正常，但是如果我删除了除最后一个动画之外的其他项目，请参见此处的小提琴：。
js代码：
Vue.component('hello', {
template: '<transition name="bounce"><li>{{ind}} <a @click="removeit(ind)">remove</a></li></transition>',
props: ['ind&
浏览 0提问于2018-01-31得票数 2
1回答
我希望能够保存我的VueJS文件并查看Aframe (，纹理等)中的更改更新。
我目前使用的是Vue CLI 3，它有自己的Webpack开发服务器设置。这对于.Vue文件非常有用，但是当我在Vue组件中有一个<a-entity/>时，似乎Aframe部分在Aframe世界中没有被正确地更新。
例如，我有一个分形aframe组件，当我更改包含它的Vue文件时，它不是改变颜色和动画，而是变成蓝色并完全停止移动。我必须重新加载页面，才能看到更改是否有效。
我试图通过一个文件添加vue.config.js，但没有成功。
下面是我当前的vue.config.js设置，但不确定如何设置，因为
浏览 1提问于2019-03-31得票数 0
回答已采纳
我试图使一个链接闪光时，用户加载的网站。但是，动画在Vue中不起作用。 我在一个单独的文件中尝试了没有Vue的相同代码，它工作得很好。 这是应该闪烁的元素。(“flash”类出现在DOM中。我的JS似乎不是问题。) <a href="/test/" :class="isFlashing ? 'flash' : ''">
<h2>Test</h2>
</a> CSS中的动画： .flash {
-webkit-animation: flashing 0.5s infinite
浏览 9提问于2019-05-25得票数 3
回答已采纳
1回答
数组数据的vue状态转换
、、、
我想要基于vue.js文档中的“使用观察者设置状态动画”构建一个状态转换：
我理解使用原始数据类型的示例。在我的例子中，我需要动画化的数据号是存储在数组中的对象中的值。
下面是我的问题的一个简化示例：
new Vue({
el: '#animated-bar-demo',
data: {
bars: [
{
width: 30,
},
{
width: 10,
},
{
width: 70,
},
]
},
// HOW T
浏览 0提问于2018-12-08得票数 0
为什么过渡动画不能在vue3js中工作？我看不见任何动画。我正在使用这个库
<template>
<nav class="navbar color-dark section-padding">
<span :class="this.$route.meta.connect ? 'navbar-toggler' : ''">
<button class="border-0 navbar" @click="open()">
浏览 5提问于2022-04-08得票数 1
回答已采纳
2回答
动画端回调的chart.js
、、、、
库是否支持对特定事件的任何类型回调？我最感兴趣的是‘关于动画结束’事件，但如果其他事件得到支持，我会很高兴知道它们。
如果这不是一种选择，你知道有什么解决办法吗？我使用的是jQuery和vue.js，当chart.js完成图表的动画时，我只需要在页面上显示一些额外的文本(完全超出图表本身)。
浏览 11提问于2015-06-27得票数 2
回答已采纳
2回答
Vue动画重启
、、
我对Vue和动画有问题。当新的Vue应用程序附加到html时，动画将重新启动。
示例：
setTimeout(() => {
new Vue({
el: "#app",
data: {}
});
}, 3000);
我有混合应用程序中的一些元素是在Vue和其他的html。如何修复/禁用vue挂载上的重启动画？
浏览 3提问于2021-04-27得票数 0
当我用Vue和jQuery调用"require“函数时，我注意到了一种特殊的行为。
对于Vue，我可以使用以下任何语句结构，并且我的应用程序运行时没有问题：
window.Vue = require('vue');
window.$ = window.Vue = require('vue');
但是，对于jQuery，我只能使用：
window.$ = window.jQuery = require('jquery');
..。因为如果我用window.jQuery = require('jquery');的方式尝试它，我
浏览 2提问于2020-10-31得票数 0
回答已采纳
1回答
我用socket.io创建了一个显示实时信息的Vue应用程序。现在我想要一些很好的动画，但我不知道如何使用Vue。
下面您可以找到表示此Vue应用程序的代码。每2秒推送一些数据，这些数据将被Vue列表呈现添加到HTML中。
在本例中，每2秒将当前Date()添加到列表中。此外，还有一个函数维护list (maintainList)，并注意显示最新的5个条目。
被通缉的动画
现在我想要一些动画，最终我想要的是：
“最老的”项目(上一项)从顶部滑出，下面的所有项目都从一个地方滑动，一个新的项目从底部滑入。或者实际上，所有的项目都会向上滑动，而那些在#app之外的项目将不会显示出来。
var e
浏览 2提问于2018-02-05得票数 4
1回答
非常简单，类似于Vue.js文档中的示例。
new Vue({
el: '#demo',
data: {
show: true
}
})
p {
width: 100px;
border: 1px solid red;
}
.fade-enter-active,
.fade-leave-active {
transition: all 5s;
}
.fade-enter {
opacity: 0;
width: 500px;
background: red;
}
.fade-enter-to {
background:
浏览 1提问于2020-09-15得票数 3
1回答
我试着用Vue.js制作一个计数器。
这个值被动画化，然后用格式化，但是我有一个问题。
我想增加一个随机的数量，当我增加，动画的数字从它当前显示到新的总数。
我有num，它保存计数器的最终值，displayNum保存动画值。
问题是，我当前的代码(如果您按下增量按钮)有时会从0开始动画，而不是当前的总数。尤其是当你超过1,000.
我怎样才能阻止这种行为？
目前，无论何时单击“增量”，它都会获取当前显示的数字，并开始一个新的中间值到目标数字。
function animate(time) {
requestAnimationFrame(animate);
TWEEN.upd
浏览 2提问于2017-12-08得票数 0
回答已采纳
1回答
我使用vue-kinesis来动画一个图像，下面的组件很好，但是动画实际上是直接用css完成的。我应该如何更改我的配置，使vue-kinesis管理轮调？
另外，如何在vue-kinesis中全局配置nuxt.config.js？
<template>
<kinesis-container>
<kinesis-element type="depth" :strength="20">
<v-img class="mb-5 image" src="/my-image.png&#
浏览 3提问于2021-02-11得票数 1
回答已采纳
1回答
我使用AOS (动画上的滚动)库与vue。AOS提供自定义JS事件：document.addEventListener('aos:in', ({ detail }) => { console.log('animated in', detail); });
当这个事件发生时，我想启动一个函数。如何将其应用到vue组件中？它看起来像：v-on-aos:in使用v-on / @，但它不起作用。
这就是我尝试过的：<div v-on:aos:in="myFunction" />
浏览 6提问于2018-11-14得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
