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. s3c2440裸机-内存控制器(五、SDRAM编程实现)

    配置内存控制器-SDRAM编程配置 2440内存控制器共有13个寄存器. BANK0--BANK5只需要设置BWSCON和BANKCONx(x为0-5)两个寄存器: BANK6.BANK7外接SDRA ...

  2. Tkinter使frame填充整个区域

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

  3. 【使用篇二】SpringBoot集成SpringSecurity（22）

    SpringSecurity是专门针对基于Spring项目的安全框架,充分利用了依赖注入和AOP来实现安全管控.在很多大型企业级系统中权限是最核心的部分,一个系统的好与坏全都在于权限管控是否灵活,是否 ...

  4. [译]Vulkan教程(08)逻辑设备和队列

    [译]Vulkan教程(08)逻辑设备和队列 Introduction 入门 After selecting a physical device to use we need to set up a  ...

  5. Git push error: http 411的解决方案总结

    目录 一.事故现场 二.事故原因 三.解决方案 一.事故现场 git push 的时候报错如下: 将分支推送到远程存储库时遇到错误:Git failed with a fatal error, the ...

  6. CNN卷积核

    一.卷积操作有两个问题: 1. 图像越来越小: 2. 图像边界信息丢失,即有些图像角落和边界的信息发挥作用较少.因此需要padding. 二.卷积核大小通常为奇数 1.一方面是为了方便same卷积pa ...

  7. SpringCloud微服务(06)：Config组件，实现配置统一管理

    本文源码:GitHub·点这里 || GitEE·点这里 一.Config简介 在微服务系统中,服务较多,相同的配置:如数据库信息.缓存.参数等,会出现在不同的服务上,如果一个配置发生变化,需要修改很 ...

  8. Flutter竟然发布了1.5版本！！！！

    2018年2月,Flutter推出了第一个Beta版本,在2018年12月5日,Flutter1.0版本发布,当时用了用觉得这个东西非常好用,对于当时被RN搞的头皮发麻的我来说简直是看到了曙光.而在昨 ...

  9. 使用Redis实现UA池

    前提 最近忙于业务开发.交接和游戏,加上碰上了不定时出现的犹豫期和困惑期,荒废学业了一段时间.天冷了,要重新拾起开始下阶段的学习了.之前接触到的一些数据搜索项目,涉及到请求模拟,基于反爬需要使用随机的 ...

  10. RocketMQ（一）：推拉消费模型客户端实践

    消息中间件是为解耦生产者和消费者的目的,三大服务点:解耦.异步.削峰. 现在的的互联网系统中,mq已经必备基础设施了,我们已明显感觉它的必要性与强大.然而,它的本质是啥?存储转发系统罢了! MQ有很多 ...