我正在开发角4.4.6应用程序,我想使用可怕的插件在滚动上实现一些动画
我的代码:
app.component.ts
import * as AOS from 'aos';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
encapsulation:ViewEncapsulation.None
})
export class AppComponent i
我使用Swiper.js在各部分之间滑动,也使用AOS.js在滚动体上进行动画。我想动画的文字在滑动部分,但只有文本在第一节动画,它只做了一次,当页面加载,而不是每次滑动滑动。我尝试了许多解决方案,但都没有奏效。以下是我在JS中尝试过的:
在幻灯片更改时使用AOS.refresh()on ()重新调用AOS.init(),在幻灯片更改时删除和添加AOS类,在幻灯片更改时手动删除和添加AOS类,将AOS属性手动添加到HTML 中
以下是两个可编辑以正确工作的片段。
var swiper = new Swiper('.swiper', {
on: {
init: f
我用的是。我试图添加AOS库,但它显示了错误Uncaught ReferenceError: AOS is not defined和aos-动画类不适用。
我还在CSS和JS中包含了文件。
script.js
<script src="http://localhost:8000/themes/js/bootstrap.bundle.min.js"></script>
<script src="http://localhost:8000/themes/js/jquery-3.5.1.js"></script>
<
我试图在Nuxt项目中以“通用”模式使用AOS,但在切换页面时遇到问题。当我手动重新加载页面时,该工具工作得很好,但是由于某些原因,当我在页面之间切换时,AOS停止工作。例如,在我的主页上,我的文本逐渐淡出,当我第一次进入主页时,当我将该元素滚动到视图中时,它会起作用。但是,如果我离开主页,然后在某一时刻返回主页,文本不再淡出,并保持隐藏或不透明度为零。
下面是我的项目插件目录中的aos.js插件
import Vue from 'vue'
import AOS from 'aos'
import 'aos/dist/aos.css'
Vue.u