Vue使用过渡类名实现动画和自定义前缀

1.效果演示

2.相关代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <!--2.自定义两种样式 控制transition实现内部动画-->

    <style>

        /*[这是一个时间点]v-enter是进入前元素的起始状态 还没开始进入*/

        /*[这也是一个时间点]v-leave-to是动画离开之后的终止状态,此时元素动画已经结束了*/

        .v-enter,

        .v-leave-to{

            opacity: 0;

            transform: translateX(80px);

        }

        /*v-enter-active [入场动画的时间段]*/

        /*v-leave-active [离场动画的时间段]*/

        .v-enter-active,

        .v-leave-active{

            transition: all 0.4s ease;

        }

    </style>

</head>

<body>

<div id="app">

    <input type="button" value="toggle" @click="flage=!flage">

    <!--//点击h3显示 再点击隐藏-->

    <!--1.使用transition 元素 吧需要被动画控制的元素包裹起来-->

    <transition>

        <h3 v-if="flage">这是一个h3</h3>

    </transition>

</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            flage: false

        },

        methods: {}

    })

</script>

</body>

</html>

自定义前缀.my-enter-active

1.效果演示:

2.相关代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <script src="../js/vue-resource-1.3.4.js"></script>

    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <!--2.自定义两种样式 控制transition实现内部动画-->

    <style>

        /*[这是一个时间点]v-enter是进入前元素的起始状态 还没开始进入*/

        /*[这也是一个时间点]v-leave-to是动画离开之后的终止状态,此时元素动画已经结束了*/

        .v-enter,

        .v-leave-to{

            opacity: 0;

            transform: translateX(80px);

        }

        /*v-enter-active [入场动画的时间段]*/

        /*v-leave-active [离场动画的时间段]*/

        .v-enter-active,

        .v-leave-active{

            transition: all 0.4s ease;

        }

        /*=============*/

        .my-enter,

        .my-leave-to{

            opacity: 0;

            transform: translateY(70px);

        }

        .my-enter-active,

        .my-leave-active{

            transition: all 0.8s ease;

        }

    </style>

</head>

<body>

<div id="app">

    <input type="button" value="toggle" @click="flage=!flage">

    <!--//点击h3显示 再点击隐藏-->

    <!--1.使用transition 元素 吧需要被动画控制的元素包裹起来-->

    <transition>

        <h3 v-if="flage">这是一个H3</h3>

    </transition>

<hr>

    <input type="button" value="toggle2" @click="flage2=!flage2">

    <!--//点击h3显示 再点击隐藏-->

    <!--1.使用transition 元素 吧需要被动画控制的元素包裹起来-->

    <transition name="my">

        <h6 v-if="flage2">这是一个H6</h6>

    </transition>

</div>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            flage: false,

            flage2: false

        },

        methods: {}

    })

</script>

</body>

</html>

Vue使用过渡类名实现动画和自定义前缀的更多相关文章

  1. 黑马vue---46、vue使用过渡类名实现动画

    黑马vue---46.vue使用过渡类名实现动画 一.总结 一句话总结: vue动画的过渡类名的时间点中没有设置样式的话就是默认的样式 使用 transition 元素,把 需要被动画控制的元素,包裹 ...

  2. Vue学习笔记【18】——Vue中的动画（使用过渡类名）

    为什么要有动画:动画能够提高用户的体验,帮助用户更好的理解页面中的功能: 使用过渡类名 步骤分析  需求: 点击按钮,让 h3 显示,再点击,让 h3 隐藏  1. 使用 transition 元素, ...

  3. Vue相关(过渡动画)

    Vue 过渡 && 动画 一.CSS过渡 1.transition标签可以用来封装需要过渡的元素,添加entering/leaving 过渡, 条件是: (1)使用条件渲染语句 v-i ...

  4. VUE：过渡&动画

    VUE:过渡&动画 vue动画的理解 1)操作css的 trasition 或 animation 2)vue会给目标元素添加/移除特定的class 3)过渡的相关类名 xxx-enter-a ...

  5. Vue列表过渡

    前面的话 本文将详细介绍Vue列表过渡 概述 前面分别介绍了单元素CSS过渡和JS过渡,以及多元素过渡.如何同时渲染整个列表呢?在这种情景中,需要使用<transition-group>组 ...

  6. Vue.js 相关知识（动画）

    1. 简介 Vue 在插入.更新或移除 DOM 时,提供多种不同方式的过渡效果,并提供 transition 组件来实现动画效果(用 transition 组件将需执行过渡效果的元素包裹) 语法:&l ...

  7. vue 路由过渡动效

    <router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果: <transition name="slid ...

  8. vue用js部分控制动画实现

    上次我们提到用vue实现过渡动画,其实只讲了vue动画的一部分,用vue自带的css状态控制动画实现,不带js http://www.cnblogs.com/null11/p/7081506.html ...

  9. vue移动端转场动画

    vue移动端转场动画 1.介绍:使用vue移动端做项目的时候,为了用户的体验良好,我们需要页面有一种进入和转出的效果 // 在App.vue根组件中 <template> <div ...

随机推荐

  1. 破解Excel密码

    https://zhidao.baidu.com/question/98055974.html 方法:1\打开文件2\工具---宏----录制新宏---输入名字如:aa3\停止录制(这样得到一个空宏) ...

  2. SDK | 声波传输

    SDK | 声波传输 - 音频流生成 https://github.com/CloudSide/WaveTransSdk/tree/master/c/freq_util Objective-C: ht ...

  3. SPATIALINDEX_LIBRARY Cmake

    https://libspatialindex.org/ QGIS:https://github.com/qgis/QGIS/blob/master/cmake/FindSpatialindex.cm ...

  4. struts2 一些注解

    实现的JSP页面位置 web-root/jsp/user/add.jsp /update.jsp // /* @Namespace("/t") @AllowedMethods(va ...

  5. underscore chain

    //可以在面向对象或者函数的风格下使用Underscore_.map([1, 2, 3], function(n){ return n * 2; }); //一般习惯用这种 _([1, 2, 3]). ...

  6. 通过FactoryBean方式来配置bean

    1.实现FactoryBean接口的java类: 2.相应的.xml文件:

  7. 老码农冒死揭开行业黑幕：如何编写无法维护的代码[ZZ]

    下面是一篇有意思的"代码大全",可谓 逆软件工程. 老码农冒死揭开行业黑幕:如何编写无法维护的代码 原文如下 让自己稳拿铁饭碗 ;-) – Roedy Green(翻译版略有删节) ...

  8. WP8.1 中获取背景色和主题色

    背景色: Application.Current.RequestedTheme 返回的值是一个枚举,Light 或者 Dark. 主题色: public static Color GetPhoneAc ...

  9. linux系统编程之信号（一）：中断与信号

    一,什么是中断? 1．中断的基本概念 中断是指计算机在执行期间,系统内发生任何非寻常的或非预期的急需处理事件,使得CPU暂时中断当前正在执行的程序而转去执行相应的事件处理程序,待处理完毕后又返回原来被 ...

  10. 如何使用socket进行java网络编程（三）

    本篇文章继续记录java网络通讯编程的学习.在本系列笔记的第一篇中曾经记录过一个项目中的程序,当时还处于项目早期,还未进入与第三方公司的联调阶段,笔者只是用java写了一个client程序模拟了一下第 ...