详解vue2.0 transition 多个元素嵌套使用过渡


Posted in Javascript onJune 19, 2017

在做vue的demo的时候遇到一个问题,多个嵌套的元素如何设置transition?

我的代码:

<div id='demo'>
    <button @click="show = !show">按钮</button>
    <transition name='move'>
      <div class="v-d" v-show="show">
        <div class='in in_move'></div>
      </div>
    </transition>
  </div>
//css
.v-d{
      width:50px;
      height:50px;
      padding:10px;
      transition: all 0.4s linear
    }
    .v-d .in{
      width:30px;
      height:30px;
      background:#000;
      transition: all 0.4s linear
    }
    .move-enter-active, .move-leave-active{
      transition: all 0.4s linear
    } 
    .move-enter, .move-leave-active{
      opacity: 0;
      transform: translateX(30px);
    } 
    .move-enter, .move-leave-active .in{
      transform: rotate(45deg)
    }
//js
window.onload = function(){
    new Vue({
     el: '#demo',
     data: {
      show: false
     }
    })
  }

运行代码后发现这个类名的过渡:

.move-enter, .move-leave-active .in{
  transform: rotate(180deg)
}

没起作用,我开始以为这种嵌套的写法不支持,但是后来经过多次尝试后发现,原来transition 应用的类名不能和基本样的类名一样,也就是.in这个类必须换名才能起作用,所以在改动下面代码:

<transition name='move'>
 <div class="v-d">
  <div class='in in_move'></div>
 </div>
</transition>

.move-enter, .move-leave-active .in_move{
  transform: rotate(180deg)
}

改完运行就ok了,实现了元素旋转和位移。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 闭包在封装函数时的简单分析
Nov 28 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
vue .sync修饰符的使用详解
Jun 15 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 Javascript
vue中如何实现变量和字符串拼接
Jun 19 #Javascript
js实现随机数字字母验证码
Jun 19 #Javascript
解决vue-cli中stylus无法使用的问题方法
Jun 19 #Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 #Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 #Javascript
AngularJS的ng-click传参的方法
Jun 19 #Javascript
JavaScript队列函数和异步执行详解
Jun 19 #Javascript
You might like
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
Python修改Excel数据的实例代码
2013/11/01 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
对Python 语音识别框架详解
2018/12/24 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
利用python生成照片墙的示例代码
2020/04/09 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
python 下载文件的几种方法汇总
2021/01/06 Python
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
中科软测试工程师面试题
2012/06/16 面试题
计算机大学生的自我评价
2013/10/15 职场文书
办公室文员自荐书
2014/02/03 职场文书
教师现实表现材料
2014/02/14 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL