正文

css3使用javascript触发过渡效果

 2022-03-12  163

关键词：

使用 :hover 和 :focus 这样的伪类，我们可以很方便的将元素从一个样式切换到另一个样式，而且切换是会有过渡效果。但有时我们想要使用 js 来驱动过渡（即在代码中触发过渡）也是可以实现的。

和普通过渡一样，先创建两个样式规则，一个是元素的初始状态，一个是过渡结束的状态。然后用 js 在合适的事机修改对应元素的样式即可。

下面以一个日夜景图片切换的样例演示：

（1）日景和夜景是两张图片叠在一起的。夜景图初始透明度是0，覆盖在日景图上方。

（2）点击“看夜景”按钮，夜景图透明度逐渐从0过渡到1，看起来画面慢慢变成夜景。

（3）点击“看日景”按钮，夜景图透明度逐渐又从1过渡到0，看起来画面恢复成日景。

在线样例如下：

<!doctype html>
<html lang="en">
<head>
<title>hangge.com</title>
 
<style>
img {
    position:absolute;
    transition: opacity 5s;
    -webkit-transition: opacity 5s;
}
 
.solid {
    opacity: 1;
}
 
.transparent {
    opacity: 0;
}
</style>
 
<script>
    function toNight(){
            var nightImage = document.getElementById("nightImage");
            nightImage.className = "solid";
    }
 
    function toDay(){
            var nightImage = document.getElementById("nightImage");
            nightImage.className = "transparent";
    }
</script>
</head>
<body>
    <button onclick="toNight()">看夜景</button>
    <button onclick="toDay()">看日景</button>
    <div>
        <img src="day.png" alt="日景"/>
        <img src="night.png" alt="夜景" id="nightImage" class="transparent"/>
    </div>
</body>
</html>

原文链接：

如何触发css3过渡动画

参考技术A不过要注意CSS3属性兼容性问题平时我们直接使用transition动画一般是这样的鼠标放置在div方块上触发动画效果（鼠标悬浮div上即可触发）参考技术B发生事件时就触发了查看详情

过渡效果

...的时间区间内平滑地过渡。我们可以在不使用Flash动画或JavaScript的情况下，在元素从一种样式变换为另一种样式时为元素添加效果。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改... 查看详情

css3过渡

通过CSS3，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。注释：Chrome25以及更早的版本，需要前缀-webkit-。它如何工作？CSS3过渡是元素从一种样式逐渐改变为另一种的效果... 查看详情

CSS3相册过渡效果

...的图像之间创建一个优雅的过渡，而不使用":hover"或一次Javascript。（我仍然对HTML5持开放态度）动画，这个幻灯片，应该在页面加载时开始，不需要用户交互。但是我的CSS没有正确计时。理想情况下，每6秒，当前图像开始淡出，... 查看详情

CSS3单向过渡？

...滑”效果吗？我希望解决方案仅使用CSS，尽可能避免使用JavaScript。逻辑流程：用户点击元素将背景颜色从白色变为黑色的过渡需要0.5秒用户松开鼠标左键将背景颜色从黑色变为白色的过渡需要0.5秒我想要查看详情

css3过渡

...以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。过渡属性下面的表格列出了所有的转换属性：属性描述CSStransition简写属性，用于在一个属性中设置四个过渡属性。3transition-property规定应用过渡的CSS属性的名称。... 查看详情

css3学习（css3过渡css3动画）

...度、位置等变化的过渡通过CSS3，我们可以在不使用Flash和JavaScript的情况下，为当前某元素从某样式改变为某样式的时候添加过渡效果。我们仅仅使用到了一个transition属性，专门来写过渡从一个样式到另一个样式过渡时所花费的... 查看详情

vue深度学习-过渡效果

...S类名来触发CSS3过渡/动画效果，你也可以提供相应的 JavaScript 钩子函数在过渡过程中执行自定义的DOM操作。　　以 v-transition="my-transition 这个指令为例，当带有这查看详情

css3实现伪类hover离开时平滑过渡效果

...开时，效果会中断，会显得很生硬。大多数人的想法都是使用js的onmouseover和onmouseleave事件来实现动画效果。其实不必这么麻烦，CSS3便可以帮你解决这些问题。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF- 查看详情

css3实现伪类hover离开时平滑过渡效果

css3常用属性--过渡动画

...属性后，很多情况下，写一些简单效果，将不需要再借助javascript去计算。 transition 过渡属性简写，可以查看详情

css3过渡

...3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果过渡动画：是从一个状态渐渐的过渡到另外一个状态可以让我们页面跟好看，更加动感十足，虽... 查看详情

css3的过渡效果，使用transition实现鼠标移入/移出效果

在css中使用伪类虽然实现了样式的改变，但由于没有过渡效果会显得很生硬。以前如果要实现过渡，就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡（transition）功能，就可以从一组样式平滑的切换到另一组样式。&n... 查看详情

css3的过渡效果，使用transition实现鼠标移入/移出效果

css3中的变形与动画

...性transiton-property早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的... 查看详情

css3动画效果：1基础

...效果transition、关键帧动画keyframes一、过渡效果transition需触发一个事件（如hover、click）时，才改变其css属性。过渡效果通常在用户将鼠标指针浮动到元素上时发生过渡(transition)动画只能定义首尾两个状态transition主要包含四个属... 查看详情

使用css3显示/隐藏元素的css过渡效果[重复]

】使用css3显示/隐藏元素的css过渡效果[重复]【英文标题】：csstransitioneffectsonshow/hideelementusingcss3[duplicate]【发布时间】：2016-06-0617:16:34【问题描述】：我使用了这组代码，效果很好，但是在显示/隐藏更多内容时我无法添加过渡。... 查看详情

css3过渡效果transition的基本使用

...ty2.transition-duration3.transition-timing-function4.transition-delay基本使用如下：多个属性可以单独设置，也可以通过transition一起设置例如：点击按钮时，方块宽度由100px变成200px，延迟1s，过渡时间用了2s，速度是按照cubic-bezier设定的一个速... 查看详情