Vue过渡动画实现

实现一个点击切换元素的隐藏和显示状态!

<div id="app">
    <transition>
        <p v-if="show">Hello World</p>
    </transition>
    <button @click="toggle">切换</button>
</div>

需要把加入动画的元素放在transition组件内,定义一个按钮的切换方法

<script>
    var app=new Vue({
        el:"#app",
        data:{
            show:true
        },
        methods:{
            toggle:function(){
                this.show=!this.show;
            }
        }

    })
</script>

给不同状态下添加相应的样式

.v-enter,.v-leave-to{
    opacity:0;
}
.v-enter-active,.v-leave-to{
    color:#00BFFF;
    transition: opacity 3s;
}

可以给transition添加一个name,如果name为"fade",则class前缀为指定的name

动画过程中类名的变化

我们可以自定义类名,在元素属性中添加进入状态 enter-active-class,和离开状态leave-active-class

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏杨龙飞前端

页面重绘和回流(重排)以及优化

22040
来自专栏xingoo, 一个梦想做发明家的程序员

用vc++做滚动条控件

  首先用应用向导产生一名为scro的基于对话框的应用,再利用对话框编辑器加入两个一样的水平滚动条,两个滚动条的id分别取idc—scr1和idc—scr2,结...

20170
来自专栏yang0range

CSS的选择器

17020
来自专栏抠抠空间

html标签详解

<!DOCTYPE> 标签 <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。 <!DOCTYPE> 声明不是 HTML ...

327110
来自专栏Google Dart

AngularDart Material Design 扩展面板 顶

一个或多个面板在扩展面板集中组合在一起。 单击面板时,面板内容将展开。 面板由名称,值,可选的辅助文本和展开的面板内容组成。

10220
来自专栏行者常至

001.html常用的基础知识点

主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。

39520
来自专栏Web 开发

getBoundingClientRect

今天fix一个拖拽库的IE8bug,发现DOM元素有一个getBoundingClientRect的方法。

12600
来自专栏西安-晁州

关于vue.js中slot的理解

slot这块看官网文档,起初有点不懂,仔细研究还是最终理解了,slot是用来干嘛的呢,先看下一个例子:

1.1K20
来自专栏大壮

UIKit框架 - TextKit

24340
来自专栏文武兼修ing——机器学习与IC设计

HTML入门手记(1)HTML概述HTML基本语法

HTML概述 学习原因:希望制作一云项目控制工具,HTML用于提供GUI并消除不同客户端差异 学习目标:会使用HTML语言,Jinja模板和Bootstrap框...

37440

扫码关注云+社区

领取腾讯云代金券