延迟样式组件中的 css 动画不透明度 [英] delay css animation opacity in styled-components

问题描述

如何在样式组件中满足某些条件时将不透明度延迟为零?使用css可行吗?

How to delay opacity to zero when certain condition is met in styled-component? Is it doable using css?

const Wrap = styled.div`
  background: #ddd;
  width: 100px;
  height: 10px;
  border-radius: 3px;
  opacity: ${props => (props.currentStep === props.steps ? 0 : 1)};
`;

演示

https://codesandbox.io/s/7k20zw5z10

我想要实现的是:进度条加载到 100%，在整个事情消失之前延迟 1 秒.

What I want to achieve: the progress bar load till 100%, delay 1 second before the whole thing fade away.

推荐答案

const Wrap = styled.div`
  background: #ddd;
  width: 100px;
  height: 10px;
  border-radius: 3px;
  opacity: ${props => (props.currentStep === props.steps ? 0 : 1)};
  transition: opacity 0.6s linear;
`;

你可以添加过渡属性来达到同样的效果

you can add transition property to achieve the same

这篇关于延迟样式组件中的 css 动画不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！