Vue中的使用Animate.css库

最新推荐文章于 2024-04-12 05:33:02 发布
最新推荐文章于 2024-04-12 05:33:02 发布
阅读量273 收藏
点赞数
分类专栏： 前端学习 文章标签： vue css3 animation
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Smart_J_King/article/details/108661709
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue中的使用Animate.css库</title>
    <script src="./vue.js"></script>
    <link rel="stylesheet" type="text/css" href="./animate.css">
    <style>
        /* 使用keyframe形式的动画 */
        /* @keyframes bounce-in {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1.5);
            }
            100% {

                transform: scale(1);
            }
        } */
        /* .enter {
            transform-origin: left center;
            animation: bounce-in 2s;
        }
        .leave {
            transform-origin: left center;
            animation: bounce-in 2s reverse;
        } */
    </style>
</head>
<body>
    <div id="app">
        <!-- <transition name="myfade" enter-active-class="enter" leave-active-class="leave">
            <div v-if="show">Vue中的使用Animate.css库</div>
        </transition>    -->
        <!-- 使用Animate.css库需要使用自定义class的原则，class中必须包含animated 然后再加入需要的动画效果类 -->
        <!-- 在这个demo中使用的是animate.css 4.1.1 2020年版本，相对2018的版本在类名上会存在一些不同 -->
        <transition name="myfade" 
                    enter-active-class="animate__animated animate__swing" 
                    leave-active-class="animate__animated animate__shakeX">
            <div v-if="show">Vue中的使用Animate.css库</div>
        </transition> 
        <button @click="handleBtnClick">切换</button>
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                show: true
            },
            methods: {
                handleBtnClick: function() {
                    this.show = !this.show
                }
            }
        })
    </script>
</body>
</html>

 

要不要吃烤肉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中使用animate.css
string佳佳的博客
11-10 890
说明：本文章所用到的版本为 “animate.css”: “4.1.1” 1、下载 cnpm install animate.css --save 2、main.js中引用 import animate from 'animate.css' Vue.use(animate) 3、使用 方法一：html标签内直接使用 <h1 class="animate__animated animate__bounce animate__delay-5s">{{ msg }}</h1> 方法
vue3中使用animate.css
最新发布
四岁爱上了她的博客
04-28 554
main.js注册：import ‘animate.css/animate.min.css’注意：animate__animated 这个类名是固定的，然后后面再跟上一个动画的类名。注意：import ‘animate.css’ 不适合在vue3项目。引入：npm install animate.css --save。使用：class=“animate__animated 动画名称”
ZUCC_移动应用交互设计VUE3.0_LAB7实现简易轮播图&&Animate.style动画库的使用
qq_54074936的博客
04-08 1123
ZUCC_移动应用交互设计VUE3.0_LAB7实现简易轮播图&&Animate.style动画库的使用
animate动画使用
ડUN的博客
12-14 2832
文章目录增加动画效果animate.css1: 在你static/css新增animate.css动画文件02、使用03、程序使用 增加动画效果animate.css 1: 在你static/css新增animate.css动画文件 官网下载地址：https://animate.style/ 下载地址：https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css 自己增加延时的效果，默认的animate.css有只有几个。我
css动画效果
DanielLeefu的博客
08-15 257
css的动画效果库 @charset "UTF-8"; /*! * animate.css -https://daneden.github.io/animate.css/ * Version - 3.7.2 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 20...
vue过渡和animate.css结合使用详解
12-09
今天学习了vue过渡和animate.css结合使用，所以，添加一点小笔记。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> [removed]...
vue2.0 和 animate.css的结合使用
11-29
这里说的是vue2.0和animate.css的结合使用。其实用过就知道用法是比较简单的。但是就是刚开始使用的时候，难免有的会遇到各种问题。简单的说说我所用过并且遇过的坑。  首先是transition组件，在2.0中由transition...
vue 1.0 结合animate.css定义动画效果
10-18
本文分步骤给大家介绍了Vue 1.0自定义动画效果，vue1.0代码结合animate.css定义动画，页面一定要引入animate.cdd，具体实例代码大家参考下本
Vue 中使用Animate动画
Hemri2580的博客
10-23 746
Vue 中使用Animate动画
Vue中使用animate实现动画效果
m0_55258023的博客
05-24 1373
Vue中使用animate实现动画效果
前端之vue3使用动画库animate.css(含动画、过渡)
weixin_46372074的博客
05-12 4983
动画效果1.默认动画默认动画实例默认动画语法2.指定name动画 1.默认动画 默认动画实例 <template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition> <h2 v-show="isShow">动画效果</h2> </transition> </div> </template&g
Vue：vue过渡、动画特效以及借助animate
m0_61041374的博客
04-12 673
name-enter-active进入过渡生效时的状态、name-leave-avtive离开过渡生效时的状态。你使用过哪些方法，来提高微信小程序的应用速度？拓展：var方式定义的变量有什么样的bug？简单描述一下微信小程序的相关文件类型?你是怎么封装微信小程序的数据请求？怎么解决小程序的异步请求问题？怎么解决小程序的异步请求问题？箭头函数需要注意哪些地方？箭头函数this的指向。将需要做动画的元素使用。有哪些参数传值的方法？分析微信小程序的优劣势。
animate.html
weixin_34049948的博客
03-18 187
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/animate....
Vue 动画效果 及 Animate的基本使用
qq_56303170的博客
11-09 3930
Vue 动画效果 及 Animate的基本使用 运用原来的css代码编写动画，但是动画的类名在Vue是有规定，在进入的时候使用v-enter-active，离开的时候使用v-leave-active @keyframes myaction { from{ transform:translateX(-100%); } to{ transform:translateX(0) } }
``三阶段``：Vue的动画和组件
Clytza的博客
03-30 269
因为抽取组件是复用，如果复用多个组件，里面的data如果被设计成一个对象，那么对应的组件的地址就会共享。这个时候对应的数据就会被污染。所以设计为一个函数，以函数返回对象的形式可以保证每个返回的对象的地址都是独立不会相互的影响。保证了数据的唯一性和隔离性。父传子是利用属性进行传值，子组件利用props来接收子传父是利用观察者模式进行传值，子组件通过$emit来派发对应的事件，父组件通过事件监听的处理函数来接收数据。
【几乎最全/全网最长的 2 万 字】前端工程化完整流程：从头搭到尾（vue3 + vite + qiankun + docker + tailwindcss + iview......）
碳学长的博客
03-20 8085
两万多字带你实践前端工程化
vue.js
weixin_43473114的博客
03-17 355
vue.js基础 Vue.js是一个轻量级MVVM框架。vue.js的核心思想是数据驱动+组件化。 1.vue实例 <script src="../lib/vue.js"></script> <body> <div id="app"> 你的名字是：{{name}} </div> </body> // 创建...
vue2使用animate.css
10-02
1. 在终端中使用npm命令安装animate.css库: ``` npm install animate.css --save ``` 2. 在你的main.js文件中引入animate.css: ```javascript import 'animate.css'; ``` 3. 在组件中使用animate.css的类来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值