0

我有我正在尝试使用的动画，但我的问题是，如果我有他们认为我应该拥有它们的引用，它们就不起作用。我可以让它们工作，但是默认 Blazor 项目中包含的计数器页面不起作用 - 计数器不计数，这表明存在严重错误，我也会遇到其他问题。动画 JavaScript 位于名为 bs-init.js 的文件中。

场景一：

<head>
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link href="css/site.css" rel="stylesheet" />
    <script src="_framework/blazor.server.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bs-init.js"></script>
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>
</body>
</html>

问题：动画有效，但计数器无效。

场景二：

<head>
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="_framework/blazor.server.js"></script>
    <script src="js/bs-init.js"></script>
</body>
</html>

问题：计数器有效，但动画无效。

我的 bs-init.js 文件的内容是这样的：

$(document).ready(function(){
    $('[data-bs-hover-animate]')
        .mouseenter( function(){ var elem = $(this); elem.addClass('animated ' + elem.attr('data-bs-hover-animate')) })
        .mouseleave( function(){ var elem = $(this); elem.removeClass('animated ' + elem.attr('data-bs-hover-animate')) });
});
4

2 回答 2

0

并非所有脚本都必须组合在一起。<script src="_framework/blazor.server.js"></script>除了身体，我从不放任何地方。试着把它放在那里。即使它可以在头部内部工作，它也会阻止您的应用程序渲染，直到它被加载。

对于您的其他图书馆；你可以试着把它们放在头上。当您查看开发人员工具 (F12) - 控制台选项卡时，您可能会看到错误消息，指出由于调用的库未知，所以事情已损坏。

于 2020-08-14T12:25:11.560 回答
0

这个问题有以下解决方案：

将脚本引用放在正文中。这里似乎真正重要的是在正文中有“_framework/blazor.server.js”引用。

将 jquery 代码的内容包装在一个函数中，如下所示：

function renderjQueryComponents() {
$(document).ready(function () {
    $('[data-bs-hover-animate]')
        .mouseenter(function () { var elem = $(this); elem.addClass('animated ' + elem.attr('data-bs-hover-animate')) })
        .mouseleave(function () { var elem = $(this); elem.removeClass('animated ' + elem.attr('data-bs-hover-animate')) });
});

$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})

}

在使用脚本的 Blazor 组件中，注入 JS 运行时：

@inject IJSRuntime jsRuntime

覆盖 OnAfterRender：

protected override async void OnAfterRender(bool firstRender)
{
    await jsRuntime.InvokeVoidAsync("renderjQueryComponents");
    base.OnAfterRender(firstRender);
}

就是这样 - 问题解决了！

于 2020-08-19T08:20:52.297 回答