Question

我有尝试使用的动画，但是我的问题是，如果我以我认为应该拥有的方式获得引用，它们将无法工作。我可以使它们工作，但是默认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')) });
});

Answer 1

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

对于其他图书馆；您可以尝试将它们放在头部。当您查看开发人员工具（F12）的“控制台”选项卡时，您可能会看到错误消息，因为调用的库是未知的，所以事情已损坏。

Answer 2

此问题具有以下解决方案：

将脚本引用放在正文中。似乎真正重要的是在正文中具有“ _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);
}

就这样-问题解决了！

Blazor服务器端-_Host.cshtml中js文件引用的位置

2 个答案: