html透明度从零到1,CSS过渡不透明度仅从0到1，或其他过渡效果

我有一个div元素，其中插入了我所有的html。当这个div的内容改变时，我想创建一个淡入效果。目前，我将不透明度设置为0，然后再向这个div插入一些内容，然后将其设置为1，这样效果才会发生。我的css的问题是这两种情况都适用，无论是从0到1还是从1到0。是否有方法使其仅在从0过渡到1时才起作用；是否有更好的方法在单页应用程序中从一页过渡到另一页？

HTML

CSS

.app

{

background-color:#f8f8f8;

opacity:0;

transition: all 1s;

-webkit-transition: all 1s;

}

JavaScript

当页面加载时，不透明度设置为1，并且效果发生：

document.getElementById("app").style.opacity='1';

当加载另一个页面时出现问题，此时不透明度设置为0，从而使转换再次生效。

编辑

更新了对问题的更好解释：

元素的不透明度不会改变。我想要的不透明性只在从0到1时起作用，这样在我插入新内容之前就被设置为0(这样就产生了效果，这就是问题所在)，当所有数据都被插入时，就会产生淡入(不透明性从0到1)效果。

最佳答案：

我将添加一个负责转换的类。如果只在类中添加转换规则，则将获得您要执行的单向转换：document.querySelector('button').addEventListener('click', () => {

document.querySelector('.app').classList.toggle('change');

});

.app {

background-color:#f8f8f8;

opacity:0;

}

.app.change {

opacity: 1;

transition: all 1s;

}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad nesciunt adipisci, ab ea deleniti ullam eius alias aperiam, explicabo dolore nihil, ex dolores perferendis. Commodi ipsa dignissimos magni consectetur soluta!

toggle opacity

html透明度从零到1,CSS过渡不透明度仅从0到1，或其他过渡效果相关推荐

css过渡和css动画的区别是什么？
CSS3中出现很多新的特性,其中比较好玩的3D操作就是:过渡和动画效果.那么css过渡和css动画的区别是什么?下面本篇文章就来给大家介绍一下CSS中过渡和动画的区别,希望对大家有所帮助. css过渡 ...
Vue过渡效果之CSS过渡
前面的话 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.本文将从CSS过渡transition.CSS动画animation及配合使用第三方CSS动画库(如animate. ...
css动画及css过渡
一.css动画 1.定义动画:使用@keyframes定义动画,关键帧可以使用关键字from~to,也可以使用 0%~100% 2.配置动画: 1) animation-name ...
[css] 过渡和动画的区别是什么？
[css] 过渡和动画的区别是什么? 相同:都会让你的页面元素动起来区别: 过渡 transition1.需要事件触发,比如hover,focus,checked , js改, @media que ...
html隐藏并失效,如果元素开始隐藏，css过渡将不起作用
小编典典要清楚地了解情况,您需要了解CSSOM和DOM之间的关系. 在先前的Q / A中,我对重绘过程的工作方式进行了一些开发. 基本上,有三个步骤,DOM操作,重排和绘制. 第一个( DOM操 ...
html和css动画效果,css过渡和css动画的区别是什么？
CSS3中出现很多新的特性,其中比较好玩的3D操作就是:过渡和动画效果.那么css过渡和css动画的区别是什么?下面本篇文章就来给大家介绍一下CSS中过渡和动画的区别,希望对大家有所帮助. css过渡 ...
如何在一个元素上有多个CSS过渡？
本文翻译自:How to have multiple CSS transitions on an element? It's a pretty straightforward question but ...
html列表太多转为下滑菜单,利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单...
利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单以往文章里面讲了使用CSS的position属性定位结合display制作下拉弹出菜单,名为<纯CSS制作下拉导航菜单> ...
vue css过渡及过渡钩子函数介绍
过渡系统是 Vue.js 为 DOM 动画效果提供的一个特性,它能在从DOM中插入移除时触发你的CSS过渡和动画 ,也就是说在DOM 发生变化时为其加特定的 class类名,Vue.js的过渡系统也支 ...
css过渡取消过渡_CSS基础知识：CSS3过渡
css过渡取消过渡随着CSS3在网络上的推广,它带来了一些有趣的新演示技术. 今天,我们将回顾使用CSS3过渡和动画的基础知识,以增加额外的修饰. 本教程包括Tuts + Premium成员可用的 ...

html透明度从零到1,CSS过渡不透明度仅从0到1，或其他过渡效果

html透明度从零到1,CSS过渡不透明度仅从0到1，或其他过渡效果相关推荐

最新文章

热门文章