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. 【搬了一套别人的cf】

    自己打了一堆没保存瞬间全没了.... 没有继续写的欲望 https://www.cnblogs.com/tea-egg/p/11664350.html

  2. Tkinter使frame填充整个区域

    在未设置默认情况下效果为 设置之后出现效果 使用方法: 增加 fill=X/Y/BOTH 以我为例: leftFrame.pack(side='left',fill=Y)

  3. Jenkins学习安装配置和使用

    为了能够频繁地将软件的最新版本,及时.持续地交付给测试团队及质量控制团队,以供评审,所以引入持续集成工具Jenkins,从而实现公司新产品持续集成,自动化部署. 环境准备 ●操作系统:Windows1 ...

  4. 记录自己的一次pjax性能优化

    什么是pjax? pjax = ajax + pushState 通过ajax让页面进行局部刷新,然后通过pushstate让url发生改变,再让pushState,让页面产生一个回退的记录,从而让页 ...

  5. Laravel 即时应用的一种实现方式

    即时交互的应用 在现代的 Web 应用中很多场景都需要运用到即时通讯,比如说最常见的支付回调,与三方登录.这些业务场景都基本需要遵循以下流程: 客户端触发相关业务,并产生第三方应用的操作(比如支付) ...

  6. MongoDB自学------（4）MongoDB主从搭建

    MongoDB复制原理 mongodb的复制至少需要两个节点.其中一个是主节点,负责处理客户端请求,其余的都是从节点,负责复制主节点上的数据. mongodb各个节点常见的搭配方式为:一主一从.一主多 ...

  7. Web安全测试学习笔记-DVWA-图片上传

    很多网站都有上传资源(图片或者文件)的功能,资源上传后一般会存储在服务器的一个文件夹里面,如果攻击者绕过了上传时候的文件类型验证,传了木马或者其他可执行的代码上去,那服务器就危险了. 我用DVWA的文 ...

  8. AttributeError: 'unicode' object has no attribute 'tzinfo' 未解决

    Internal Server Error: /demo/machineinfo.htmlTraceback (most recent call last): File "C:\Python ...

  9. python-Redis模块常用的方法汇总

    Redes模块常用的方法汇总 一.创建建Redis对象 1.直接使用 import redis r = redis.Redis(host='127.0.0.1', port=6379) 2.连接池使用 ...

  10. 【转载】Android 中 View 绘制流程分析

    创建Window 在Activity的attach方法中通过调用PolicyManager.makeNewWindo创建Window,将一个View add到WindowManager时,Window ...