js控制transition 失效问题_Html5_论坛

js控制transition 失效问题

q1***51 分类：Html5 人气：2113 回帖：4 发布于6年前收藏

前端动画效果开发时遇到如下问题 , 有解决办法 , 但是并不明白其中原理

问题如下 ;

页面存在 dom , 具有css属性 opacity : 0 ;

js在某一时段需要设置透明度变换的动画

会出现问题的操作方法是 :

dom.style.cssText += ';-webkit-transition:opacity 500ms linear ; opacity:1;';

这样操作并不会按照过度执行动画 , 解决办法如下 :

dom.style.cssText += ';-webkit-transition:opacity 500ms linear ;';
setTimeout(()=>{
    dom.style.opacity = '1' ;
} , 50)

这样就能起到作用;

个人理解为 transition设置后需要 '适应' 一下才能起作用 , 但是并不明白真正的原理 , 希望各位大大指点;

标签：css html html5 javascript

讨论这个帖子（4）垃圾回帖将一律封号处理……

Lv6 码匠

素***2 学生 6年前#1

跑一下就知道了

1.transition 过渡~ 何为过度就是从一个起始值到一个终点站的过渡
下面是经过测试的代码~

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box{
                width: 100px;
                height: 100px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div class="box" id="box">asdasdsadsa</div>
        <input type="button" value="变" onclick="changeCSS()" />
        <script>
            box.style.transition="all .75s";
            box.style.opacity=1;
            function changeCSS(){
                box.style.opacity=0.5;
            }
        </script>
    </body>
</html>

Lv5 码农

谁***哥 Web前端工程师 6年前#2

transition是给元素添加过渡效果的，而判断过渡效果是需要有值改变才会触发，你的transition和opacity"几乎"是同时设置的，当然不会触发transition的效果。

你想想，每个元素在你还没有设置值的时候都是会有一些默认值的，比如你就放个<div></div>上去，那么它的height默认值在chrome下是0px，这时候如果你只是想添加个初始值，在hover的时候再去改变它的高度，你刚写上transition:width 1s ease; height:100px;width:100%，你就发现它开始动起来了，显然有问题呀。

你直接把-webkit-transition:opacity 500ms linear写在css里面就可以了吧？它始终会在值改变的时候才去触发，你也不用写延迟了呀

Lv6 码匠

ti***nx 学生 6年前#3

transition需要两个值起始和终止，你应该再加一个初值，推测

Lv5 码农

38***38 职业无 6年前#4

你上面那种写法没什么问题,肯定是有其他方面的影响.

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取