为什么没有动画，说说我对动画的理解

<!DOCTYPE html>

<html>

<head>

div{

animation: all 10s;

-webkit-animation: all 10s;

}

.cls{

width: 200px;

height: 300px;

background-color: red;

opacity: 1;

}

.ani{

/* width: 1200px; */

height: 300px;

background-color: red;

opacity: 0.1;

}

</style>

</head>

<body>

</div>

<br />

</div>

</div>

document.getElementsByClassName('cls')[0].onclick=function(){

console.log(this);

// this.style.width='1000px';

this.className='ani';

}

// $('.cls').click(function(){

// $(this).css({

// 'width':'1000px'

// })

</script>

</body>

</html>

这段代码没有动画

我对动画的理解，麻烦老师指正下，

用animation：all 1s或者transition：all 1s。all指所有支持动画的属性变化时会触发动画，1s指的事持续时间；
在实际操作中，我定义一个类名，定义动画不执行的状态
js事件中改变对应的样式，触发动画，可以是直接修改syle，也可以是通过类名的替换或者是添加新类名来触发，需要提前在css中写好样式，如果是添加新类名的话注意样式叠加规则。
我是这么理解的，，，所以这里没有动画我确实没看懂。。。。希望老师指点下

王文辉 2020-05-30

源自：CSS3动画 2-27 animation

收起

4回答

好帮手慕星星 2020-05-31 11:48:21

同学你好，div的宽度在没有设置的时候是父元素的100%，这是浏览器计算出来的。但是在切换class值的时候，ani中没有宽度属性，所以也就看不到宽度的变化。当这个类名添加上的时候，浏览器才会解析样式，最后计算出来宽度。

祝学习愉快！

收起回答

提问者王文辉 2020-05-30 22:08:45

<!DOCTYPE html>

<html>

<head>

div{

transition: all 10s;

}

.cls{

width: 200px;

height: 300px;

background-color: red;

opacity: 1;

}

.ani{

/* width: 1200px; */

height: 300px;

background-color: red;

opacity: 0.1;

}

</style>

</head>

<body>

</div>

<br />

</div>

</div>

document.getElementsByClassName('cls')[0].onclick=function(){

console.log(this);

// this.style.width='1000px';

this.className='ani';

}

// $('.cls').click(function(){

// $(this).css({

// 'width':'1000px'

// })

</script>

</body>

</html>

收起回答

好帮手慕言 2020-05-30 18:19:38

同学你好，关于同学的问题，以下方的为例：

如果transition是写在要删除的类上，那么在点击时，删除类名，元素的宽度变为100%，是不会有动画的，可以给不删除的类上，也添加transition样式即可，例如：

祝学习愉快~

收起回答

提问者王文辉 #1

是的，我发现了，老师说的是对的。但测试中发现两个类名之间必须有相同的with属性，如果一个不设置，就不会触发。比如说这里如果.ani{}中不设置width，就不会触发，但因为div的宽度在没有设置的时候是父元素的100%，所以div也会变宽，但不会触发动画，我回复在另外的楼层哈

2020-05-30 22:08:17