首页 新闻 赞助 找找看

CSS3的transition动画据说既可以通过伪类触发也可以通过js的鼠标事件触发……

0
[已解决问题] 解决于 2014-11-30 10:01

CSS3的transition动画据说既可以通过伪类触发也可以通过js的鼠标事件触发,是真的还是加的,用伪类触发我知道,用js怎么触发?!

北在北方的主页 北在北方 | 初学一级 | 园豆:182
提问于:2014-11-28 23:31
< >
分享
最佳答案
1

addClass()和removeClass()就可以了

奖励园豆:5
ThreeTree | 小虾三级 |园豆:1490 | 2014-11-29 09:46

我定义transition后,有定义一个class(仅仅该变量width),然后用js增加这个class,并没有出现transition定义的动画,但是如果通过或:hover改变width,就有?

为什么?是不是transition动画不能通过js触发?!

北在北方 | 园豆:182 (初学一级) | 2014-11-29 10:34

@北在北方: 发一下代码吧,最好两种情况的代码都发一下,猜测可能是transition不支持auto值的

ThreeTree | 园豆:1490 (小虾三级) | 2014-11-29 20:12

@ThreeTree: 

<style>
            #gradientColor{
                width:200px;
                height:200px;
                /*background-image:-moz-linear-gradient(top, red, green);*/
                background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
                background-size:200px 200px;
                background-color:red;
                transition:width 1s ease-in 0s;
            }
            .bigerWidth{
                width:500px;
            }
        </style>
        <script>
            function ChangeWidth()
            {
                try{
                    gradientColor.className = "bigerWidth";
                    console.log(gradientColor.className);
                }catch(e)
                {
                    console.log(e.message);
                }
            }
        </script>
        <div id="gradientColor" onclick="ChangeWidth()"></div>

北在北方 | 园豆:182 (初学一级) | 2014-11-30 08:31

@ThreeTree: css触发就是把.bigerWidth改成#gradientColor:hover,再去掉js代码

北在北方 | 园豆:182 (初学一级) | 2014-11-30 08:35

@ThreeTree: 我明白是怎么回事了,transition动画的定义中有关的属性的起始值和结束值必须定义在class中,transition动画的过程定义则可以在class或id中,这样动态添加class增加结束值才能引起属性的变化进而触发transition动画。

北在北方 | 园豆:182 (初学一级) | 2014-11-30 10:01

@北在北方: 为什么 我把样式卸载css里面 却没有任何效果??

21cn | 园豆:200 (初学一级) | 2016-03-21 15:49

@21cn: 可以的话,贴代码上来看看

北在北方 | 园豆:182 (初学一级) | 2016-03-27 23:10

这不是选择器优先级的问题吗,.bigerWidth和#gradientColor都声明了width的话,以#gradientColor为准,所以你写的代码它的width是没有发生改变的,.bigerWidth改成#gradientColor.bigerWidth就行了

jjsscc | 园豆:200 (初学一级) | 2016-07-19 19:40
其他回答(1)
0

无意看了一下回答,发现还是没有回答楼主想知道的问题。楼主一开始的观点是对的,transition和animation都可以通过JS来触发。比如你写了一个按钮btn,每当点击btn时,让btn.style.animation="animationName time";animationName可以先写在CSS里,然后当btn被点击时,JS等于直接调用了动画效果。transition也是一样,把transition写在样式里,然后点击btn,让某个div移动:div.style.webkitTransform = "translateY(30px)";这样当点击div块在Y轴向下位移30px时就会有过渡的效果。等等等等,楼主可以慢慢发散思维了。

蔡明予 | 园豆:202 (菜鸟二级) | 2015-10-15 16:53
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册