1回答
我刚开始吃早午餐，只想把animate.css加到一个页面上。我已经通过npm安装了animate.css，并将其添加到package.json中。我的早午餐配置如下所示：
module.exports = {
npm: {
globals: {
$: 'jquery'
},
styles: {
animate: ['css/animate.css']
}
},
files: {
javascripts: {
joinTo: {
'libraries.js': /^(?!app\/
浏览 7提问于2017-11-23得票数 0
我在一个Symfony 4新项目上。
通过纱线，我安装了(例如) CSS库animate.css。
yarn install animate.css
在webpack.config.js文件中，我添加了这样的animate.css文件：
.addStyleEntry('animate', './node_modules/animate.css/animate.css')
我的问题是:这是添加这样一个CSS库的好方法吗？我不确定直接使用node_module路径是否是一个好的实践。
有更好的办法吗？
浏览 0提问于2019-11-13得票数 0
回答已采纳
2回答
所以我照做了
npm install animate.css --save
我可以在我的node_modules中看到它，我希望能够在我的elixir phoenix-react项目中使用animate.css。
我只是不确定在哪里导入/需要它，甚至不确定路径是什么。
我尝试从我的app.scss文件@import "animate.css";，但这不起作用
我还尝试在我的app.js文件中使用import "animate.css/animate.min.css";，但同样不起作用。
我的问题是，我在哪里导入/需要animate.css才能正常工作？我想在我的
浏览 9提问于2018-03-26得票数 2
2回答
我正在尝试通过推迟CSS和JS来提高我的web性能速度。我是Shopify/ Liquid的新手，尽管我认为这是一个PHP问题，但我不知道。 我的代码是这样的(在head标签中)： {{ 'animate.css' | asset_url | stylesheet_tag }} 它会变成这样吗？ <!-- Defer animate.css-->
<link rel="preload" href="{{ 'animate.css' | asset_url | stylesheet_tag }}" as=&
浏览 22提问于2021-03-25得票数 0
回答已采纳
1回答
在检查网页性能时，我发现GTmetrix发现一些CSS & JS文件是从不同的位置加载的--相同的文件。示例：
<action method="addItem" module="ves_blockbuilder" ifconfig="ves_blockbuilder/ves_blockbuilder/enable_animation"><type>skin_css</type><name>ves_base/animate.css</name></action>
&l
浏览 0提问于2017-11-07得票数 0
1回答
我的项目是通过Laravel Mix与Webpack一起构建的。我想动态导入一个ES6模块，该模块本身导入其他模块和一个样式表。下面是动态导入的模块(loadJQueryTextillate.js)：
import style from 'animate.css/animate.css';
import 'letteringjs';
import 'textillate';
style.use();
export default () => {
};
下面是动态导入loadJQueryTextillate.js (animatedTex
浏览 1提问于2019-11-15得票数 0
我终于开始在本地开发，并为WP构建安装了Roots.io。鲍尔，古普，诺德，一切都很好。我使用Bower安装了wow.js，它就在那里，但依赖项是animate.css。有没有办法通过Bower/Homebrew/etc安装animate.css？
在animate.css Github上，我没有看到将它包含在Roots中的简单方法。我已经尝试了手动包含其中也没有工作，因此寻找理想的/干净的解决方案的问题。
谢谢!
浏览 3提问于2016-03-26得票数 0
回答已采纳
我在我的插件中使用animate.css流行的动画库。如何知道相同的animate.css库已经存在于页面中的其他插件或主题。我知道CSS标识符总是像my-plugin-animate-css一样保持唯一，那么如何找到相同的css或js文件的存在呢？
浏览 13提问于2017-01-17得票数 0
我试图使用以下依赖项将animate.css加载到我的应用程序：
我想实现这一点，我将能够配置什么动画将加载使用动画-css-网络包。
下面是我在项目中所有依赖项的列表
"dependencies": {
"animate-css-webpack": "^3.5.6",
"animate.css": "^3.6.1"
},
"devDependencies": {
"@babel/core": "^7.0.0-beta.38",
"@bab
浏览 1提问于2018-03-02得票数 3
回答已采纳
我正在开发一个应用程序使用Vue，Quasar，和animate.css包的CSS动画在我的网站。一切都很顺利，直到最近我在使用npm run build命令时遇到了问题，这导致了标题中的错误。在一些调查之后，我尝试安装postcss-rtlcss包，这也导致了在npm run serve上出现这个错误。请注意，我是Vue和node.js生态系统的新手，所以如果我做了什么完全错误的事情，请告诉我。 运行npm run serve时出现错误 ERROR Failed to compile with 1 error
浏览 94提问于2021-08-04得票数 0
回答已采纳
1回答
我目前正在用和构建一个网站。每当我滚动到元素显示的部分时，我都会尝试在animate.css中重放CSS动画。
问题是:在我滚动到下一节之后，它就滑出了，但是当我再次回到那个部分时，元素就消失了，不会再次滑入。
这是我尝试过的方法(没有正常工作)：
$('#fullpage').fullpage({
onLeave: function(index, nextIndex, direction) {
$('#text').removeClass('animated slideInLeft');
$('#text'
浏览 1提问于2016-05-23得票数 1
回答已采纳
我可以设置整个单词的动画，或者如果我使用任何其他选择器，但是使用blast作为类，我不能设置单个角色的动画。
//used blast.js to seperate each character
$("h1").blast({ delimiter: "character" });
//on hover function to animate each character on hover and used bounce animation using animate.css from github, https://github.com/daneden
浏览 3提问于2018-03-10得票数 2
3回答
为什么标签没有动画效果？
、、、
我想用animate.css来做动画，但它没有work.this是我的代码：
$(document).ready(function(){
$('a').hover(function(){
$(this).toggleClass('animated infinite pulse');
});
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" con
浏览 0提问于2017-01-21得票数 1
1回答
希望事情进展顺利。
我试图使用WOW.js http://mynameismatthieu.com/WOW/docs.html和animate.css来向我的站点添加动画。WOW.js要求我通过在标题中添加以下内容来初始化它：
<link rel="stylesheet" href="css/animate.min.css">
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
我使用的主
浏览 0提问于2014-02-22得票数 0
回答已采纳
我在我的angular项目中使用bootstrap和一些库，在开发过程中突然发生了一个问题。找不到所有与引导相关的CSS类。 angular.json "styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
"node_modules/@fortawesome/fon
浏览 39提问于2020-12-27得票数 0
1回答
我想在animate.css和wow.js的帮助下，在wordpress网站上制作一个短语的动画。当我重新加载一个页面时，我想要动画的短语看起来就像一个普通的文本，只有在那之后动画才开始发生。我试着改变脚本的顺序，但它仍然不能按预期的方式工作。
add_action('wp_enqueue_scripts', 'theme_styles');
add_action('wp_footer', 'theme_scripts');
function theme_styles() {
wp_enqueue_style(&
浏览 5提问于2020-01-30得票数 1
我正在通过freecodecamp工作，在jQuery部分他们告诉你..
“我们已经在后台包含了jQuery库和Animate.css库，以便您可以在编辑器中使用它们。”
到目前为止，我一直在完成练习，然后跳到notepad++并试验代码，直到我对自己所做的事情感到有信心。
我已经在我的notepad++文档中添加了
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
和
<link rel="styleshee
浏览 13提问于2017-07-29得票数 0
回答已采纳
如何让ng-animate在图像、段落或div等简单的animate.css元素上工作？
在静态页面中，我只包含了animate.css和wow.js库，并向要设置动画效果的元素添加了几个类。但是我没有成功地让它在ng-view中工作。
<img class="wow fadeInLeft" src="http://images.ximo365.com/nick-olsen-pose.jpg" alt="Nick Olsen On-the-go shots">
浏览 2提问于2015-02-24得票数 0
2回答
我们使用的是Angular.js和Bootstrap，项目中没有jQuery。
我想使用animate.css在上下滚动时淡入屏幕上的元素。
我找到了下面的示例，它确切地展示了我需要实现的目标：
我如何使用Angular和animate.css做到这一点，有没有关于这方面的教程或任何帮助都会很好。
谢谢
浏览 1提问于2014-11-18得票数 0
4回答
当试图编译我的grunt文件并构建到我的dist文件夹进行部署时，我在控制台中得到以下错误：
Running "rev:dist" (rev) task
dist/public/app/app.js >> 63decaf3.app.js
dist/public/app/vendor.js >> a09756ab.vendor.js
dist/public/app/app.css >> d2017fc8.app.css
Warning: Unable to read "dist/public/bower_components/anima
浏览 0提问于2014-09-02得票数 9
回答已采纳
我是Webpack (和开发人员)的新手，我正在努力弄清楚如何使用Webpack和一些插件将任何CSS导入分离到一个单独的CSS链接标签中。
这是我的webpack-config.js：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: &
浏览 8提问于2022-07-05得票数 1
回答已采纳
3回答
我知道如何使用JS来实现这一点，但是在中，Animate.css文本的更改非常流畅，而且上面没有JS！
有人能给我解释一下吗？
谢谢
浏览 0提问于2014-08-26得票数 5
回答已采纳
0回答
wow.js的问题
、、、、
因此，尝试将wow.js与animate.css结合使用
我的动画css运行良好，wow.js已经被包含并激活，但它没有注册我向下滚动到元素，所以没有动画。
我在html底部标记之前包含的内容+导入到我的main.css中的animate.css库
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
new WOW().init();
</script>
视口
<meta name=&
浏览 12提问于2017-06-14得票数 0
回答已采纳
$('#clickMe').click(function() {
$('#ticketsDemosss').append($('<li>').text('my li goes here')).addClass('fadeIn');
});
<link href="http://s.mlcdn.co/animate.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.co
浏览 0提问于2016-07-17得票数 0
1回答
我试图在React/Next.js中使用animate.css。我可以使用动画. can的内联类名创建动画，但是我想从我的scss文件中调用动画.can的关键帧动画。我跟随了youtube的一个向导，他做到了。唯一的区别是我使用的是Next.js。
作为参考：
他在3:55导入animate.css文件，并能够在38:31使用动画. use的bounceIn动画。
示例：
在styles/globals.scss文件中，我添加了animate.css
@import 'animate.css'
在我的AnimateLetters.tsx文件中，在顶部导入scss模块，
imp
浏览 11提问于2022-05-17得票数 1
回答已采纳
我正在整理一个投资组合网站。进展得很顺利，但我真的遇到了麻烦。
我使用的是一个页面，到目前为止，我已经创建了四个div来分解我的工作。我会有图形设计作品从一边或另一边，因为用户滚动。
现在，我找到了WOW.js，它恰好可以做我想做的事情，即。只有当用户向下滚动到我的图形时，才会显示它。但对我来说，我不能让它工作，它应该是如此简单，狗风格。太令人惊讶了！
有问题的图形是一颗心，而animate.css有一个很好的‘脉搏’位的CSS我想使用。在animate.css中，WOW.js应该表现得非常出色。但我完全迷路了。我的JS技能还很基础，所以请耐心等待。
正如WOW.js文档所述，我通过以下命令链
浏览 13提问于2014-10-07得票数 4
我使用了一些关键帧来动画一些元素进入我的页面，但是这些元素位于页面的底部，所以动画在你看到它们之前就发生了。 有没有办法阻止动画的发生，直到用户滚动到元素的视图中？最好不是jQuery解决方案，因为我不熟悉它。 注意:我知道有一个名为wow.js的库可以解决这个问题，但它使用animate.css来制作动画。这对我来说是一个问题，因为我最初使用的是animate.css，但它覆盖了/与我拥有的一些其他css冲突。这就是为什么我转而使用关键帧来制作动画，并且为了让元素的所有属性都能正常工作，我认为我必须使用关键帧而不是animate.css
浏览 16提问于2020-09-01得票数 0
动画-rails不是在heroku上工作，而是在本地工作。然而，Coffeescript正在从事heroku的生产。
rails版本：Rails 6.1.4.1 ruby版本：ruby 3.0.2p 107 (2021-07-07修订版0db68f0233) arm64-darwin20 20
下面是各个文件中的代码：
Gemfile -> gem "animate-rails"
application.css.scss -> *= require animate
application.js -> import 'animate.css/animat
浏览 4提问于2021-09-29得票数 1
我目前正在使用wow.js和animate.css集成CSS动画(bounceUp、fadeIn等)。不过，如果我想使用fadeIn，那么如何将图像翻译成5em呢？
浏览 2提问于2016-01-24得票数 1
1回答
在我的主题中，我称animate.css和Wow.js为主题。
//* Enqueue Animate.CSS and WOW.js
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
function sk_enqueue_scripts() {
wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/css/animate.min.css' );
wp_enqueue_script(
浏览 0提问于2017-02-18得票数 2
回答已采纳
我正尝试在我的Ruby on Rails 6.1.3.2项目中使用。我已经用Yarn安装了wowjs，我在我的node_modules文件夹中看到了它。
我已经将wowjs导入我的应用程序app/javascript/packs/application.js
import WOW from 'wowjs';
require("wowjs/css/libs/animate.css")
我有一个位于以下路径的script.js文件: app/javascript/script.js并启动WOW
wow = new WOW({
animate
浏览 32提问于2021-05-29得票数 0
回答已采纳
1回答
注：这个问题已经解决了。请看这篇文章的底部，找出修复方法。
我有一个奇怪的问题，在过去的几天里，我已经把我的头发扯掉了。谢天谢地，我想我已经把它隔离到一个不正确的窗口/文档高度的问题上，导致我的滚动动画永远不会出现。我正在尝试使用来自animate.css的animate.css动画来动画一个h2头，但是wow.js只会隐藏元素，即使滚动过它也不会显示它。如果我删除wow.js并只使用Animate.css，h2标题就会很好地显示出来。
我使用下面的代码进行了一些调试，我想我知道为什么wow.js (我也尝试使用其他滚动库而没有成功)中断--出于某种原因，jQuery报告窗口高度和文档高度都是
浏览 7提问于2015-11-06得票数 0
回答已采纳
我使用本教程将mdbootstrap添加到项目中：
我的angular.json：
"styles": [
"node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
"node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
"node_modules/@fortawesome/fontawesome-free/scss/regular.s
浏览 2提问于2021-07-05得票数 0
2回答
我有一个main.scss文件：
@import '../../node_modules/animate.css/animate.css';
@import '../../node_modules/perfect-scrollbar/css/perfect-scrollbar.css';
@import 'abstracts/variables';
@import 'abstracts/mixins';
@import 'abstracts/modifiers';
@import 'abstracts
浏览 2提问于2018-02-26得票数 0
1回答
我想在bootstrap的模式窗口中使用wow.js动画(带有animate.css)，如下所示
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
浏览 1提问于2016-04-08得票数 2
1回答
只需尝试使用waypoint.js和animate.css更改滚动条上的背景色。为什么它不工作？
$( document ).ready(function(){
console.log( "ready!" );
$('#one').waypoint(function(direction) {
if (direction == "up") {
$("body").animate({ backgroundColor: "#131314" }, 600);
} else if (dir
浏览 0提问于2014-07-27得票数 0
我正在为新项目使用nuxt.js 2.9.1，并且我使用了一些第三方库，比如vue-select。在开发模式下一切正常，但是在生产模式下css不会加载！我使用npm run generate来生成项目。
css: [
'@neneos/nuxt-animate.css',
'@assets/fontawesome-pro-5.8.2-web/css/all.css',
'animate.css/animate.css',
'vue-select/dist/vue-select.css'
],
plu
浏览 0提问于2019-08-28得票数 1
我有个问题。如何在nuxt.config.js的媒体查询中禁用插件vue.fullpage？
module.exports = {
plugins: {
'~plugins/fullpage-vue.js'
}
}
fullpage-vue.js
import Vue from 'vue'
import 'animate.css'
import 'fullpage-vue/src/fullpage.css'
import VueFullpage from 'fullpage-vue'
if (s
浏览 1提问于2017-10-08得票数 1
2回答
我在文档的header中链接了jQuery、animate.css和morphtext.js。
在h1中，我创建了一个id为'js-rotating‘的跨度。然后，我直接在html中调用它，如下所示
<script>
$("#js-rotating").Morphext({
animation: "bounceIn",
separator: ",",
speed: 2000,
complete: function () {
}
});
</script>
但是，插件没有响应。我已经确认我可以通过直接链接访问链接的c
浏览 0提问于2016-04-29得票数 4
1回答
当您向下滚动时，我正在使用waypoints.js和animate.css来动画页面上的元素。我想知道如何将内置的不透明属性合并到animate.css框架中。在我的小提琴，你可以看到apon如何进入屏幕从顶部或底部，我的形象将动画，但我如何使它褪色以及。注意在第二张图片上它是如何褪色的，但是第一次闪现看起来有点浮躁。
这是我的javascript：
//Animate from top
$('.animated').waypoint(function() {
$(this).toggleClass($(this).data('animated'));
},
{
浏览 1提问于2014-08-22得票数 1
回答已采纳
本文是关于animate.css和wow.js的。这可能是一个非常愚蠢的问题，但动画持续时间和动画延迟与数据哇持续时间和数据哇延迟之间的区别是什么？
谢谢!
浏览 8提问于2018-10-19得票数 0
我的导入不是在输出的main.css文件中导入的，通常main.css应该用引导、方框、动画的css填充.
但他们的出现就像这个@import "bootstrap.min.css";@import "font-awesome.min.css";@import "animate.css";...
这是我的gruntfile.js
module.exports = function (grunt)
{
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmT
浏览 3提问于2015-08-06得票数 1
回答已采纳
我正在制作HTML模板。通常我使用WOW.js和animate.css，但它不喜欢这个示例
那么，有人能告诉我在这个示例站点中使用的库或包吗？
下面是我的代码示例
浏览 6提问于2022-04-21得票数 0
我使用'animate.css‘作为npm包。为了使用它，我在开发过程中指定了import 'animate.css'。但在制作中，它说要包括“Animate.min.css”。如何指定在生产构建期间选择animate.min.css的parceljs。 或者import animate.css将能够解决在开发构建中正确的animate.css和在生产构建中的animate.min.css。解析器如何知道选择正确的文件，因为主文件在package.json中指定为animate.css，但在package.json ...not中有“文件”属性确定它是否可以提供帮助。
浏览 35提问于2021-08-29得票数 0
1回答
我知道有100多个资源在这上面，但我已经花了3个多小时，似乎就是想不通。一切都在本地运行，但是当我推到Heroku时，所有的地狱都被打破了。
下面是我的文件夹结构：
vendor
-assets
--custom
---impression
----css
-----file1.css
-----file2.css
-----file3.css
我在我的application.scss中调用了它，如下所示
@import "impression/css/animate.css";
@import "impression/css/bootstrap.min.css"
浏览 1提问于2018-03-18得票数 0
1回答
ngx-哇不工作角度5
、、、
我以前从未使用过这个图书馆，我希望有人能帮我，
好的，我正在试着使用库，但是我无法让它工作。所以按照指示
我已经运行了yarn add wowjs
我把它添加到angular-cli.json中
"scripts": [
"../node_modules/wowjs/dist/wow.js"
]
我还以同样的方式将animate.css添加为全局依赖项。
"styles": [
"../node_modules/animated.css/animate.css"
]
然后按照如下说明安装ngx-wow。
`yarn a
浏览 2提问于2018-04-06得票数 1
回答已采纳
我正在尝试在我的Laravel项目中使用。我使用以下命令安装了Animate.css：
npm install animate.css --save
我将其包含在\resources\sass\app.scss文件中：
@import "~animate.css/animate.css";
然后，我运行以下npm命令将其编译成app.css：
npm run dev
当我在浏览器中查看页面源代码时，似乎包含了animate.css，但却没有动画元素。动画似乎在Edge中工作，但在Chrome (v81.0.4044.138)或FF (v76.0)中不起作用。
浏览 19提问于2020-05-09得票数 2
回答已采纳
我尝试在我的图库照片上使用Animate.css的pulse功能，但它不起作用。
我用的是Animate.css CDN - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />
然后，我将class="pulse"添加到我的img中，但什么也没有发生。我是不是还漏掉了另一个步骤。
浏览 40提问于2018-07-04得票数 0
2回答
我想在我的wordpress主题中使用animate.css。我将该文件放在文件夹mytheme/includes/css中，然后在文件function.php中使用它
// Import Animate.css
wp_enqueue_style( 'mytheme-wp', THEME_DIR_URI . '/includes/css/animate.css' );
但是当我使用文件animate.css的样式时，它们不起作用。
我是不是错过了一些步骤？
浏览 1提问于2016-12-14得票数 1
我正在尝试在React Modal中做一个简单的单元测试。如果它在没有道具的情况下安装。这是test.js文件。
import React from "react";
import { mount } from "enzyme";
import MyModal from ".";
import "wicg-inert";
import "animate.css";
describe("MyModal component", () => {
describe("When props
浏览 0提问于2019-02-22得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
