记录一下今天在vue的transition中遇到的坑

<!DOCTYPE html>

<html>

<head>

    <title>Vue中CSS动画原理</title>

    <script type="text/javascript" src="../vue.min.js"></script>

    <!-- 定义动画样式 -->

    <style type="text/css">

        .v-enter{

            opacity: 0;

        }

        .v-enter-active{

            transition: opacity 3s;

        }

    </style>

</head>

<body>

    <div id="root">

        <!-- 动画 -->

        <transition name="myfade">

        <!-- name属性的值作为fade-enter fade-enter-active等开头的名字 -->

            <div v-if="show">hello world</div>

        </transition>

        <button @click="change">切换</button>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el: "#root",

            data: {

                show: true

            },

            methods: {

                change: function () {

                    this.show = !this.show

                }

            }

        });

    </script>

</body>

</html>

被告知 transition 的 name 属性是可以自己随意设置的，于是给了 myfade，结果发现没有效果。

后来研究了下发现，这个 name 的值是用来替换 v-enter 的 v

于是修改成

　　<style type="text/css">

        .myfade-enter{

            opacity: 0;

        }

        .myfade-enter-active{

            transition: opacity 3s;

        }

    </style>

就OK了~

另注：transition 只有 name 这一个属性，且只有一个子元素，这个子元素需要 v-if 或 v-show 来控制是否显示。

vue的transition的name作用的更多相关文章

  1. vue项目的各个文件作用

    vue项目的各个文件作用: build:放置的是webpack配置文件,一般不动,修改了必须重启服务器才能生效 config:放置针对开发环境和线上环境的配置文件,一般不动 修改后需重启 node_m ...

  2. php开发面试题---vue面试题（vue.js的好处及作用）

    php开发面试题---vue面试题(vue.js的好处及作用) 一.总结 一句话总结: 双向数据绑定:在做ajax的时候,更新实在是太方便了 用数据绑定的思想,vue可以简单写单个页面,也可以写一个大 ...

  3. 在 vue 中用 transition 实现轮播效果

    概述 今天我接到一个需求:轮播效果.本来我是打算使用 Swiper 实现的,但是想起来貌似 transition 也能实现.于是就试了下,真的可以,还挺简单的,于是就记录下来,供以后开发时参考,相信对 ...

  4. vueX、vue中transition的使用、axios

    引入一篇好文章链接:看一遍就会的vuex文章;完!!! vue中transtion的使用:transition文章;完!!! axios的文章:axios;完!!!

  5. Vue中transition和animation的使用

    一:二者的对比 1.动画循环就用animation.在animation中有一个animation-iteration-count属性可以定义循环次数.transition是执行一次以后就不会执行,但 ...

  6. vue中自定义指令vue.direvtive，自定义过滤器vue.filter(),vue过渡transition

    自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...

  7. Vue中使用key的作用

    key的作用是为了在diff算法执行时更快的找到对应的节点,提高diff速度 key具有唯一性 vue中循环需加 :key=“唯一标识” ,唯一标识可以使item里面id index 等,因为vue组 ...

  8. vue中 key 值的作用

    原文地址 我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面.而隐藏在背后的原理便是其高效的Diff算法. vue和react的虚拟DOM ...

  9. vue的transition过渡效果

    需要4个类: *-enter: 进入的开始状态, *-enter-active: 进入的结束状态, *-leave: 离开的开始状态, *-leave-active: 离开的结束状态 vue-rout ...

随机推荐

  1. 《Python编程从0到1》笔记1——表达式的风格（前缀、中缀、后缀）

    运算符和运算数组成表达式.运算符和运算数的出现次序会影响表达式乃至程序设计语言的风格. 1．前缀表达式 前缀,是指运算符的位置在前.前缀风格的一个例子是函数调用,如求最大值函数:max(3, 2, 5 ...

  2. 第八周课程总结&实验报告

    实验六 Java异常 •实验目的 •理解异常的基本概念: •掌握异常处理方法及熟悉常见异常的捕获方法. • 实验要求 •练习捕获异常.声明异常.抛出异常的方法.熟悉try和catch子句的使用. •掌 ...

  3. String StringBuffer StringBuilder区别与联系

    java.lang.String.java.lang.StringBuffer.java.lang.StringBuilder都是字符串类型,是Java中用于处理字符串常用的三个类.它们主要有以下区别 ...

  4. [转帖]黑客通过 Rootkit 恶意软件感染超 5 万台 MS-SQL 和 PHPMyAdmin 服务器

    黑客通过 Rootkit 恶意软件感染超 5 万台 MS-SQL 和 PHPMyAdmin 服务器 https://www.cnbeta.com/articles/tech/852141.htm 病毒 ...

  5. 阿里云安装filezilla

    1.连接服务器 ssh 或者 远程连接 到服务器: 2.安装相应软件 安装EPEL,EPEL是yum的一个软件源,里面包含了许多基本源里没有的软件: yum -y install epel-relea ...

  6. springboot - 应用实践（1）认识springboot

    1.为什么要推出springboot springboot设计的目的是用来简化新spring应用的初始搭建以及开发过程.springboot遵循“约定优于配置”原则. 2.springboot默认的配 ...

  7. Spring（三）--Spring bean的生命周期

    Spring bean的生命周期 ApplicationContext Bean生命周期流程 1.需要的实体类 ackage com.xdf.bean; import org.springframew ...

  8. 使用render函数渲染组件

    使用render函数渲染组件:https://www.jianshu.com/p/27ec4467a66b

  9. shiro三连斩之概念

    1, 什么是Shiro? Shiro是一个安全框架,用于解决系统的认证和授权问题,同时提供了会话管理,数据加密,与WEB集成,缓存等机制. Authentication:身份认证/登录,验证用户是不是 ...

  10. 初步学习jquery学习笔记（六）

    jquery学习笔记六 AJAX 简介 AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. load() 方法 load() 方法从服务器加载数据,并把返回的数据 ...