vue.js - 过渡&动画 - 无效情况

最新推荐文章于 2024-05-24 23:45:01 发布

weixin_34129696

最新推荐文章于 2024-05-24 23:45:01 发布

阅读量2.3k

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5b7d0b2d6fb9a01a112dd7ac

版权

前言

在学习vue.js的过渡动画时，官方案例主要使用了opacity属性。但是将opacity替换成width后就无动画效果。通过搜索发现有人遇到过这种问题，但是都没有找到问题所在。

替换后代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1 {
            width: 600px;
            height: 200px;
            background-color: red;
        }

        .fade-enter-active, .fade-leave-active {
            transition: width .5s;
        }
        .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
            width: 0px;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="show = !show">button</button>
    <transition name="fade">
        <div id="div1" v-if="show">
        </div>
    </transition>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        show: false
    }
})
</script>
</body>
</html>
复制代码

调试结果：

发现在class切换到v-leave-to时，width没起作用，原因是由于CSS选择器权重的问题导致的 #div1的权重要比 .fade-leave-to的高。

解决方案

解决方法有两种：（1）提高选择器权重：

#div1.fade-enter, #div1.fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    width: 0px;
}
复制代码

（2）使用!important

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    width: 0px !important;
}
复制代码

总结

在使用vue.js中，有的地方需要自己定义特定名称的CSS类，如果在运行过程中，vue.js自动添加的类没有问题，但是类中的属性没有效果，很有可能是选择器选中问题。

像这个案例中，动画切换的类都是在动画开始，中间，结束时加的，动画结束后这些类就移除了。调试很麻烦。

weixin_34129696

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue.js - 过渡&动画 - 无效情况

前言在学习vue.js的过渡动画时，官方案例主要使用了opacity属性。但是将opacity替换成width后就无动画效果。通过搜索发现有人遇到过这种问题，但是都没有找到问题所在。替换后代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me...
复制链接

扫一扫