vue动画实现方式

<!DOCTYPE html>

<html lang="zh-cn">

    <head>

        <meta charset="utf-8">

        <link rel="stylesheet" href="animate.css">

        <style>

        * {

            margin: 0;

            padding: 0;

        }

        #app{

            width: 600px;

            margin: 100px auto;

        }

        .box {

            width: 200px;

            height: 200px;

            background-color: pink;

            display: flex;

            justify-content: center;

            align-items: center;

        }

        button {

            width: 50px;

            height: 30px;

        }

        /* 第二步 定义入场动画 和 出场动画 */

        /* 格式： 动画名-enter 入场动画*/

        /* 格式： 动画名-leave 出场动画*/

        /* 进入过渡开始时的状态和离开过渡结束时的状态 */

        .fade-enter,.fade-leave-to{

            opacity: 0;

            transform:translate(500px, 0);

        }

        /* 进入过渡中的效果和离开过渡中的效果 */

        .fade-enter-active,.fade-leave-active{

           transition: all 0.8s;

        }

         /* 进入过渡结束时的状态和离开过渡结束时的状态 */

         .fade-enter-to,.fade-leave{

            opacity: 1;

         }

        .bounce-enter-active{

            animation: bounce-in .5s;

        }

        .bounce-leave-active {

            animation: bounce-in .5s reverse;

        }

        @keyframes bounce-in{

              0% {

                transform: scale(0);

              }

              50% {

                transform: scale(1.5);

              }

              100% {

                transform: scale(1);

              }

        }

            .pp{

                background-color: #c05;

            }

        </style>

    </head>

    <body>

        <div id="app">

            <!-- 1.过渡 -->

            <button @click="isShow = !isShow">过渡</button>

            <!-- 第一步给要动画的元素 起个动画名子 -->

            <!-- 格式:  name=动画名 -->

            <transition name="fade" :duration="3000">

                <p class="box" v-show="isShow">我要过渡</p>

            </transition>

            <hr>

            <!-- 2.动画 -->

            <button @click="isShow2 = !isShow2">动画</button>

            <!-- 第一步给要动画的元素 起个动画名子 -->

            <!-- 格式:  name=动画名 -->

            <transition name="bounce" :duration="{ enter: 1000, leave: 1800 }">

                <p class="box" v-if="isShow2">我要运动</p>

            </transition>

            <!-- 3.自定义过渡 类名 -->

            <button @click="show = !show">自定义</button>

            <transition

                enter-active-class="animated tada"

                leave-active-class="animated bounceOutRight"

            >

                <p v-if="show" class="pp">hello</p>

            </transition>

        </div>

        <script src="velocity.js"></script>

        <script src="vue.js"></script>

        <script>

        var vm = new Vue({

            data: {

                isShow: true,   //过渡

                isShow2:true,   //动画

                show:true,

            },

            methods: {

            }

        }).$mount('#app');

        </script>

    </body>

</html>

vue动画实现方式的更多相关文章

  1. vue动画理解，进入、离开、列表过度和路由切换。

    vue的动画对于很多初学者,甚至对很多老鸟来说也是很费劲,不容易控制的. 这篇文章讲vue动画的理解.其实没那么难. 动画理解 一个元素从A状态变成B状态,如果这个过程通过某种方式反应在视图上了,那么 ...

  2. Vue动画操作

    概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...

  3. Javascript - Vue - 动画

    动画状态类名 vue动画通过将需要执行动画的标签放入transition标签中,再通过设置预置的vue动画类名的css样式来控制动画的呈现效果. 开场动画状态的三个类名 v-enter:动画开始之前的 ...

  4. vue动画的用法

    vue动画 在vue.js中有两种写动画的方法,第一种就是像js里一样,用原生代码来实现,第二种则是使用animate.css的动画类文件,这个动画类和bootstrap.css文件类似,直接调用类就 ...

  5. iOS页面切换动画实现方式。

    iOS页面切换动画实现方式. 1.使用UIView animateWithDuration:animations:completion方法 Java代码 [UIView animateWithDura ...

  6. vue动画及其原理

    1,vue动画的实现原理,主要是通过在不同时期给需要动画的dom元素加上css动画样式 我们以显示和隐藏动画为例 a, 需要动画的dom元素 b,点击时vue控制往vue中加的样式 2,  我们以两张 ...

  7. vue教程3-02 vue动画

    vue教程3-02 vue动画 以下代码,已经用包管理器下载好vue,animate <!DOCTYPE html> <html lang="en"> &l ...

  8. vue组件定义方式，vue父子组件间的传值

    vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...

  9. vue 动画原理 part1

    Vue动画原理 增加和删除css增加样式实现一个过渡效果也就是动画效果 1.需要动画效果的标签外包裹一个transition标签 会被自动分析css样式,然后自动构建一个动画流程 transition ...

随机推荐

  1. Where is the kernel documentation?; Ubuntu 上如何安装 linux 内核文档；fedora 上如何安装linux内核文档？

    有时候,linux内核文档对我们很重要,我们可以在linux系统中安装,并及时查看: 参考链接:https://askubuntu.com/questions/841043/where-is-the- ...

  2. [考试反思]1113csp-s模拟测试114：一梦

    自闭.不废话.写一下低错. T1:觉得信心赛T1不会很恶心一遍过样例直接没对拍(其实是想写完T2之后回来对拍的) 状态也不好,基本全机房都开始码了我还没想出来(skyh已经开T2了).想了40多分钟. ...

  3. 【RTOS】基于V7开发板的最新版RTX4 V4.81.1程序模板，不使用CMSIS-RTOS封装层，继续保持超强战斗力

    模板下载: 链接:https://pan.baidu.com/s/1idoQYcR3SOzVC3KTFcMGMA   提取码:i8k5 1.MDK使用MDK5.26及其以上版本. 2.进入到MDK5后 ...

  4. 05-文档编辑与yum命令

    一.Linux vi/vim vi是所有的Unix系统都会有,但是目前我们使用最多的是vim编辑器.vim具有程序编辑的能力,可以主动以字体颜色辨别语法的正确性. vim是从vi发展出来的一个文本编辑 ...

  5. IE浏览器远程代码执行高危漏洞(CVE-2019-1367)

    IE浏览器远程代码执行高危漏洞(CVE-2019-1367)加固遇到的问题 一.背景介绍 Internet Explorer,是微软公司推出的一款网页浏览器.用户量极大.9月23日微软紧急发布安全更新 ...

  6. Tuple<T1,T2,.........T> 元组简单使用

    元组:一个数据结构,逗号分隔,用于传递一个程序或者操作系统的一系列值得组合 NET Framework直接支持一至七元素得数组 Tuple<T1> Tuple<T1,T2> T ...

  7. H5 App实现热更新，不需要重新安装app

    直接上代码吧,你竟然搜到了我的文章就应该知道了,为什么要热更新 //app热更新下载 //假定字符串的每节数都在5位以下 function toNum(a) { //也可以这样写 var c=a.sp ...

  8. IL指令列表

    使用编译器可以将C#代码编译为中间语言(Intermediate Language,IL)代码,中间语言是一种平台无关的指令集,最终会由CLR将中间语言字节码转换为对应平台的机器码从而执行:阅读IL代 ...

  9. 在Windows下配置多个git账号

    1.生成并部署SSH key 安装好Git客户端后,打开git bash,输入以下命令生成user1的SSH Key: ssh-keygen -t rsa -C "user1@email.c ...

  10. JPA的基本注解

    场景 JPA入门简介与搭建HelloWorld(附代码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103473937 ...