老师，为什么每次刷新的时候course还多了个动画？

course-plan里的内容从左上角到右下角显示出来

<!DOCTYPE html>

<html>

<head>

<title>Homework</title>

</head>

<body>

</nav>

</div>

</div>

</header>

<h2 class="caption">前端小白入门系列课程</h2>

<div class="course-plan-desc">带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变</div>

</div>

</div>

<h2 class="caption">HTML5与CSS3实现动态网页系列课程</h2>

<div class="course-plan-desc">带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变</div>

</div>

</div>

<h2 class="caption">前端小白入门系列课程</h2>

<div class="course-plan-desc">带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变,带你通过系统学习</div>

</div>

</div>

<h2 class="caption">前端小白入门系列课程</h2>

<div class="course-plan-desc">带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变</div>

</div>

</div>

<h2 class="caption">前端小白入门系列课程</h2>

<div class="course-plan-desc">带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变</div>

</div>

</div>

<h2 class="caption">前端小白入门系列课程</h2>

<div class="course-plan-desc">带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变</div>

</div>

</div>

<h2 class="caption">前端小白入门系列课程</h2>

<div class="course-plan-desc">带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变</div>

</div>

</div>

<h2 class="caption">前端小白入门系列课程</h2>

<div class="course-plan-desc">带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变</div>

</div>

</div>

<h2 class="caption">HTML5与CSS3实现动态网页系列课程HTML5与CSS3实现动态网页</h2>

<div class="course-plan-desc">带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变</div>

</div>

</div>

</div>

</div>

</div>

</footer>

</body>

</html>

margin:0;

padding:0;

}

text-decoration:none;

}

//布局样式

#layout(@name){

& when(@name=header){

height:60px;

#bg-color(black);

}

& when(@name=banner){

height:560px;

background-color:#ccc;

}

& when(@name=courses){

height:750px;

#bg-color(white);

}

& when(@name=footer){

height:98px;

#bg-color(black);

}

position:relative;

}

#bg-color(@name){

& when(@name=black){

background-color:black;

}

& when(@name=white){

background-color:#fff;

}

& when(@name=light){

background-color:#363c41;

}

#ft-size(@name){

& when(@name=small){

font-size:12px;

}

& when(@name=medium){

font-size:14px;

}

& when(@name=large){

font-size:16px;

}

& when(@name=big){

font-size:22px;

}

& when(@name=title){

font-size:32px;

}

#color(@name){

& when(@name=dark){

color:#5c646b;

}

& when(@name=black){

color:#141914;

}

& when(@name=white){

color:#fbfbfb;

}

& when(@name=yellow){

color:#ffcc33;

}

& when(@name=red){

color:red;

}

& when(@name=weak){

color:#959aa0;

}

//课程模块

#course-box(){

width:240px;

height:250px;

.fl();

margin:0 20px 34px 0;

box-shadow:0 4px 8px rgba(7,17,27,.1);

#bg-color(white);

position:relative;

top:-110px;

left:0;

#bg-img("titlebg.png");

#decorate-bottom();

#radius(6px);

}

#decorate-bottom(){

&:before{

content:'';

display:block;

box-shadow:0 8px 16px rgba(7,17,27,.2);

#bg-color(white);

#radius(4px);

width:98%;

height:3px;

position:absolute;

left:1%;

bottom:-5px;

}

&:after{

content:'';

display:block;

box-shadow:0 8px 16px rgba(7,17,27,.2);

#bg-color(white);

#radius(4px);

width:96%;

height:3px;

position:absolute;

left:2%;

bottom:-11px;

}

//通用样式

#cover-background(){

background-size:cover;

background+_:no-repeat center;

}

.fl(){

float:left;

}

.fr(){

float:right;

}

.clearfix(){

&:after{

content:'';

display:block;

clear:both;

font-size:0;

line-height:0;

zoom:1;

}

//功能样式

#line-height(@h){

height:@h;

line-height:@h;

}

#square(@w){

width:@w;

height:@w;

}

#bg-img(@src){

background-image:url("../imgs/@{src}");

}

#radius(@radius:50%){

border-radius:@radius;

}

#center-h(@width){

left:50%;

margin-left:@width*-.5;

}

//模块样式

.header{

#layout(header);

.logo{

width:128px;

height:36px;

background+_:url(../imgs/logo.png);

#cover-background();

.fl();

margin:12px 25px;

}

.nav{

.fl();

height:100%;

&-item{

#ft-size(medium);

#color(white);

#line-height(60px);

.fl();

display:block;

padding:0 25px;

&:hover{

#bg-color(light);

}

&_icon_new{

#bg-color(light);

position:relative;

&:after{

content:'';

display:block;

position:absolute;

#bg-img("icon-new.png");

#square(16px);

top:10px;

right:10px;

}

.search{

.fr();

height:36px;

position:relative;

margin:12px 25px;

padding-right:25px;

&-input{

border:none;

outline:none;

width:242px;

border-bottom:1px solid #666;

#bg-color(black);

#line-height(36px);

}

&-submit{

display:block;

#square(22px);

#bg-img("icon-1-sprite_w22.png");

background-position:0 0;

position:absolute;

top:4px;

right:25px;

}

&::before{

content:'前端入门';

display:block;

#color(dark);

#bg-color(dark);

#line-height(30px);

text-align:center;

#ft-size(small);

position:absolute;

left:0;

top:0;

}

.profile{

.fr();

&-item{

display:block;

#square(60px);

.fl();

margin-right:1px;

position:relative;

}

&-cart:before,

&-message:before{

content:'';

display:block;

#square(22px);

#bg-img("icon-1-sprite_w22.png");

position:absolute;

top:19px;

left:19px;

}

&-message:before{

background-position:0 -44px;

}

&-ava{

#square(36px);

#bg-color(light);

#radius();

margin:12px;

background+_:url(../imgs/ava.jpg);

#cover-background();

}

.banner{

#layout(banner);

#bg-img("bg.jpg");

width:100%;

background-position:center;

background-size:cover;

}

.courses{

#layout(courses);

&-list{

width:1020px;

margin:0 auto;

position:relative;

.clearfix();

.course{

#course-box();

&:nth-child(4n){

margin-right:0;

}

&-cover{

height:90px;

img{

width:100%;

#radius(4px);

}

#radius(10px);

}

&-plan{

width:260px-40px;

padding:16px 0 0 20px;

position:absolute;

top:105px;

#bg-img("titlebg.png");

transition:all 1s;

&-times{

#ft-size(small);

#color(weak);

#line-height(34px);

padding-top:10px;

}

&-person{

padding-left:8px;

}

&-desc{

padding-top:8px;

border-top:1px solid #d9dde1;

#ft-size(small);

#color(weak);

}

&-price{

position:absolute;

bottom:0;

padding-left:20px;

height:62px;

width:100%;

#bg-color(white);

#ft-size(small);

#color(red);

font-style:normal;

vertical-align:super;

}

span{

position:absolute;

bottom:20px;

}

.caption{

#ft-size(small);

#color(black);

#line-height(18px);

}

&:hover .course-plan{

top:40px;

}

&:last-child{

#center-h(240px);

}

#radius(10px);

}

.footer{

#layout(footer);

#ft-size(small);

&-link{

width:1200px;

margin:0 auto;

padding:30px 0 16px 40px;

#line-height(12px);

&-item{

display:inline-block;

margin-right:30px;

.fl();

#color(weak);

&:hover{

#color(white);

}

&-copy{

width:1200px;

margin:0 auto;

#line-height(12px);

#color(dark);

padding-left:40px;

}

&-share{

width:135px;

height:32px;

position:absolute;

right:40px;

top:34px;

&-item{

.fl();

display:block;

margin-right:13px;

#square(32px);

#bg-img("footer-sprite.png");

opacity:.6;

&:hover{

opacity:1;

}

&_i_1{

background-position:0 -279px;

position:relative;

&:before{

content:'';

display:block;

#bg-img("footer-sprite.png");

background-position:0 0;

width:170px;

height:220px;

opacity:1;

position:absolute;

top:-217px;

left:-69px;

display:none;

}

&:hover footer-share-item_i_1:before{

display:block;

}

&_i_2{

background-position:0 -321px;

}

&_i_3{

background-position:0 -363px;

}

小章鱼丸 2019-02-24

源自：项目：实现商品列表页 3-9 作业题

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2019-02-25 14:44:53

使用Chrome浏览器测试是没有这个动画效果的，但是使用360极速浏览器测试是有的。

是因为transition过渡中设置的改变属性是all，360浏览器在解析的时候所有属性可能都会解析到，所以建议改成只改变动画的属性即可：

自己再试试。

收起回答

好帮手慕星星 2019-02-25 11:02:33

你好，测试了你的代码，course区域在刷新的时候没有多余的动画，鼠标移入每个课程模块的时候才会有动画效果。

同学可以详细描述一下是在什么情况下产生的什么动画效果吗，便于老师定位问题，给你解决问题。

祝学习愉快！

收起回答

提问者小章鱼丸 #1

刷新页面就会有，不做任何操作，course-plan里的内容自动从左上角到右下角逐渐展开那样显示出来，动画1秒完成

2019-02-25 13:42:05

相似问题

为什么网页刷新时，都会执行一次 Request变更属性，再执行一次Request新增属性

为什么每次刷新页面sessionid会变化

什么时候用过渡，什么时候用动画

第二遍动画执行的2s 是不是也在定时器第二次4s内

加了定时器刷新还是会出现动画时有时无的现象

登录后可查看更多问答，登录/注册

响应式开发与常用框架 2018

参与学习人
提交作业 2198 份
解答问题 5012 个

如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！

了解课程

本课精华内容

问答作业

图片高度不一样的问题

45 24

请问老师原理是什么

70 16

请问老师到底是什么机制

44 12

我的js为什么绑定不上啊

0 11

请问这个怎么解释

44 11

查看更多本课问答

请稍等 ...

老师，为什么每次刷新的时候course还多了个动画？

老师，为什么每次刷新的时候course还多了个动画？

正在回答

请选择置顶位置