css正向过渡和反向过渡

CSS中过渡效果可以通过transition属性控制。

情况1:只在控制元素中使用使用transition属性,控制元素的正向过渡效果和反向过渡效果。

css代码:

           p{
				width: 100px;height: 6px;position: absolute;top: -6px;left: 0px;background: #ca3333;
				transform: rotateY(90deg);
				transition: transform 1s;
			}
			div:hover a{
				background: #ca3333;color: #fff;
			}
			div:hover p{
				transform: rotateY(180deg);
				/*transition: transform 5s;*/
			}

过渡效果

 

情况2:只在控制元素的hover中使用transition属性,此时transition属性属性只控制元素的正向过渡,无反向过渡。

css代码:

           p{
				width: 100px;height: 6px;position: absolute;top: -6px;left: 0px;background: #ca3333;
				transform: rotateY(90deg);
				/*transition: transform 1s;*/
			}
			div:hover a{
				background: #ca3333;color: #fff;
			}
			div:hover p{
				transform: rotateY(180deg);
				transition: transform 5s;
			}

过渡效果2

 

情况3:在控制元素中和控制元素的hover中同时使用transition属性,此时在控制元素中的transition属性属性控制反向过渡,在控制元素的hover中的transition属性属性控制正向过渡。

css代码:

            p{
				width: 100px;height: 6px;position: absolute;top: -6px;left: 0px;background: #ca3333;
				transform: rotateY(90deg);
				transition: transform 1s;
			}
			div:hover a{
				background: #ca3333;color: #fff;
			}
			div:hover p{
				transform: rotateY(180deg);
				transition: transform 5s;
			}

过渡效果3

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue提供了过渡动画的内置支持,可以通过Vue的transition组件来实现过渡动画。在transition组件中,可以定义进入动画、离开动画和过渡模式等。同时,CSS也提供了丰富的动画效果,可以通过CSS的transition属性来实现过渡动画。 下面是一个使用Vue和CSS实现过渡动画的示例: ```html <template> <div> <button @click="show = !show">Toggle</button> <transition name="fade"> <p v-if="show">Hello, World!</p> </transition> </div> </template> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-to { opacity: 0; } </style> <script> export default { data() { return { show: false }; } }; </script> ``` 在上面的示例中,我们定义了一个按钮和一个包裹着文本的transition组件。文本的显示与隐藏通过控制show属性来实现。同时,我们也定义了一个名为"fade"的transition,它定义了进入和离开动画的方式。 在CSS中,我们定义了两个类名为"fade-enter-active"和"fade-leave-active",它们分别表示进入和离开动画的状态。这里我们使用了CSS的transition属性,它指定了过渡的属性和时长。在这个例子中,我们使用opacity属性和0.5秒的时长来实现淡入淡出的效果。 同时,我们也定义了类名为"fade-enter"和"fade-leave-to",它们分别表示进入和离开动画的初始和结束状态。在这个例子中,我们将opacity属性的值设置为0,表示文本初始时是透明的,离开时也是透明的。 通过这样的方式,我们就可以使用Vue和CSS来实现过渡动画了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值