执行动画后隐藏元素

时间：2017-08-31 05:51:16

标签： html css

我有这个样本：

link

代码HTML： 

<div id="overlay-page">
    <div class="loader-logo">
        <div class="loader-img-container">
         <img class="top" src="http://www.googu.ro/wallpaper/image/peisaje/peisaj-07.jpg" alt="Loading" />
            <img class="top" src="http://assets.sport.ro/assets/protv/2014/12/31/image_galleries/40908/cele-mai-frumoase-peisaje-din-lume-locurile-pe-care-trebuie-sa-le-vizitezi.jpg" alt="Loading" />
        </div>
    </div>
</div>

CODE CSS： 

@keyframes cf3FadeInOutTopLoader {
    0% {
        opacity:1;
        visibility: visible;
    }
    45% {
        opacity:1;
        visibility: visible;
    }
    55% {
        opacity:0;
        visibility: hidden;
    }
    100% {
        opacity:0;
        visibility: hidden;
    }
}
@keyframes cf3FadeInOutBottomLoader {
    0% {
        opacity:0;
        visibility: hidden;
    }
    45% {
        opacity:0;
        visibility: hidden;
    }
    55% {
        opacity:1;
        visibility: visible;
    }
    100% {
        opacity:1;
        visibility: visible;
    }
}
/* here your name of id was wrong */
#overlay-page img.top {
    animation-name: cf3FadeInOutTopLoader;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-duration: 2s;
    animation-direction: alternate;

}
#overlay-page img.bottom {
    animation-name: cf3FadeInOutBottomLoader;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-duration: 2s;
    animation-direction: alternate;

}
#overlay-page img{
    position: absolute;
    left: 0px;
    right: 0px;
    margin: 0 auto;
  width:200px;
}

这个动画的问题是我想运行一次并在动画结束后隐藏".top"元素。

我该怎么做？ 基本上有两件事是重要的：

1.只运动一次动画。

2.该项目在执行后隐藏

提前完成任务！

6 个答案:

答案 0 :(得分：1)

这是CSS 

@keyframes cf3FadeInOutTopLoader {
    0% {
        opacity:1;
        visibility: visible;
    }
    45% {
        opacity:1;
        visibility: visible;
    }
    55% {
        opacity:0;
        visibility: hidden;
    }
    100% {
        opacity:0;
        visibility: hidden;
    }
}
@keyframes cf3FadeInOutBottomLoader {
    0% {
        opacity:0;
        visibility: hidden;
    }
    45% {
        opacity:0;
        visibility: hidden;
    }
    55% {
        opacity:1;
        visibility: visible;
    }
    100% {
        opacity:1;
        visibility: visible;
    }
}

img.top {
    animation-name: cf3FadeInOutTopLoader;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-duration: 2s;
    animation-direction: alternate;
    visibility:hidden;

}
#overlay-page img.bottom {
    animation-name: cf3FadeInOutBottomLoader;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-duration: 2s;
    animation-direction: alternate;

}
#overlay-page img{
    position: absolute;
    left: 0px;
    right: 0px;
    margin: 0 auto;
  width:200px;
}

答案 1 :(得分：0)

你只需要将'visibility：hidden'应用到id'＃overlay-page img'即可。

像这样：

@keyframes cf3FadeInOutTopLoader {
	0% {
		opacity:1;
		visibility: visible;
	}
	45% {
		opacity:1;
		visibility: visible;
	}
	55% {
		opacity:0;
		visibility: hidden;
	}
	100% {
		opacity:0;
		visibility: hidden;
	}
}
@keyframes cf3FadeInOutBottomLoader {
	0% {
		opacity:0;
		visibility: hidden;
	}
	45% {
		opacity:0;
		visibility: hidden;
	}
	55% {
		opacity:1;
		visibility: visible;
	}
	100% {
		opacity:1;
		visibility: visible;
	}
}
/* here your name of id was wrong */
#overlay-page img.top {
	animation-name: cf3FadeInOutTopLoader;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-duration: 2s;
	animation-direction: alternate;

}
#overlay-page img.bottom {
	animation-name: cf3FadeInOutBottomLoader;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-duration: 2s;
	animation-direction: alternate;

}
#overlay-page img{
	position: absolute;
	left: 0px;
	right: 0px;
	margin: 0 auto;
  width:200px;
  visibility:hidden;
}
 <div id="overlay-page">
            <div class="loader-logo">
                <div class="loader-img-container">
                 <img class="top" src="http://www.googu.ro/wallpaper/image/peisaje/peisaj-07.jpg" alt="Loading" />
                    <img class="top" src="http://assets.sport.ro/assets/protv/2014/12/31/image_galleries/40908/cele-mai-frumoase-peisaje-din-lume-locurile-pe-care-trebuie-sa-le-vizitezi.jpg" alt="Loading" />
                </div>
            </div>
        </div>

答案 2 :(得分：0)

你也可以尝试这个。

<span *ngIf="item.status !=='E1' && item.status !=='B'  && item.status !=='R'">{{item.status_desc}}</span>

答案 3 :(得分：0)

如果必须处理多个动画，可以使用jquery中的内置事件

  $(".loader-img-container > .top").one("webkitAnimationEnd animationend", function(e) {
    $(this).hide();
  });


$(".loader-img-container > .top").one("webkitAnimationEnd animationend", function(e) {
    $(this).hide();
  });
@keyframes cf3FadeInOutTopLoader {
	0% {
		opacity:1;
		visibility: visible;
	}
	45% {
		opacity:1;
		visibility: visible;
	}
	55% {
		opacity:0;
		visibility: hidden;
	}
	100% {
		opacity:0;
		visibility: hidden;
	}
}
@keyframes cf3FadeInOutBottomLoader {
	0% {
		opacity:0;
		visibility: hidden;
	}
	45% {
		opacity:0;
		visibility: hidden;
	}
	55% {
		opacity:1;
		visibility: visible;
	}
	100% {
		opacity:1;
		visibility: visible;
	}
}
/* here your name of id was wrong */
#overlay-page img.top {
	animation-name: cf3FadeInOutTopLoader;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-duration: 2s;
	animation-direction: alternate;

}
#overlay-page img.bottom {
	animation-name: cf3FadeInOutBottomLoader;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-duration: 2s;
	animation-direction: alternate;

}
#overlay-page img{
	position: absolute;
	left: 0px;
	right: 0px;
	margin: 0 auto;
  width:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overlay-page">
            <div class="loader-logo">
                <div class="loader-img-container">
                 <img class="top" src="http://www.googu.ro/wallpaper/image/peisaje/peisaj-07.jpg" alt="Loading" />
                    <img class="bottom" src="http://assets.sport.ro/assets/protv/2014/12/31/image_galleries/40908/cele-mai-frumoase-peisaje-din-lume-locurile-pe-care-trebuie-sa-le-vizitezi.jpg" alt="Loading" />
                </div>
            </div>
        </div>

答案 4 :(得分：0)

您已同时使用<img class='top'>，因此我已将第二个更改为class="bottom"

在#overlay-page img.top css中添加animation-fill-mode以在动画结束时应用属性值

@keyframes cf3FadeInOutTopLoader {
	0% {
		opacity:1;
		visibility: visible;
	}
	45% {
		opacity:1;
		visibility: visible;
	}
	55% {
		opacity:0;
		visibility: hidden;
	}
	100% {
		opacity:0;
		visibility: hidden;
	}
}
@keyframes cf3FadeInOutBottomLoader {
	0% {
		opacity:0;
		visibility: hidden;
	}
	45% {
		opacity:0;
		visibility: hidden;
	}
	55% {
		opacity:1;
		visibility: visible;
	}
	100% {
		opacity:1;
		visibility: visible;
	}
}
/* here your name of id was wrong */
#overlay-page img.top {
	animation-name: cf3FadeInOutTopLoader;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-duration: 2s;
	animation-direction: alternate;  
  animation-fill-mode:forwards;
}
#overlay-page img.bottom {
	animation-name: cf3FadeInOutBottomLoader;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-duration: 2s;
	animation-direction: alternate;

}
#overlay-page img{
	position: absolute;
	left: 0px;
	right: 0px;
	margin: 0 auto;
  width:200px;
}
 <div id="overlay-page">
            <div class="loader-logo">
                <div class="loader-img-container">
                 <img class="top" src="http://www.googu.ro/wallpaper/image/peisaje/peisaj-07.jpg" alt="Loading" />
                    <img class="bottom" src="http://assets.sport.ro/assets/protv/2014/12/31/image_galleries/40908/cele-mai-frumoase-peisaje-din-lume-locurile-pe-care-trebuie-sa-le-vizitezi.jpg" alt="Loading" />
                </div>
            </div>
        </div>

答案 5 :(得分：0)

您只需将{ opacity:0; visibility: hidden; }添加到.top样式。

在CSS中，当动画结束时，动画中的样式将被删除，因此元素将具有动画之前的样式。这里因为你的动画没有任何延迟，元素的样式实际上是动画后它将具有的最终样式

相关问题
最新问题