Question

我决定使用vanilla javascript创建淡入淡出的动画效果。

这是我淡入效果的代码：

document.querySelector('.open-1_1').onclick = function() {

    document.getElementById('about-frame').style.display = 'block';     

    for (opacity = 0; opacity < 1.1; opacity = opacity + 0.1) 
    {           
        setTimeout(function(){document.getElementById('about').style.opacity = opacity;},100)                       
    }       
};

我要做的是通过运行for循环逐步增加#about div从0到1的不透明度，该循环应该在循环的每次迭代中等待100毫秒

然而#about div在一段时间之后从黑暗变为不透明度1而没有看到淡入效果。

我的逻辑出了什么问题？

Answer 1

这个for循环没有延迟，它在100毫秒内设置十次超时。

for (opacity = 0; opacity < 1.1; opacity = opacity + 0.1) 
{           
    setTimeout(function(){document.getElementById('about').style.opacity = opacity;},100)                       
}

因此淡入淡出只需要1毫秒。

另一方面，这会在一秒钟内循环MyFadeFunction 10次，这就是你要求的。

var opacity = 0;

function MyFadeFunction() {
   if (opacity<1) {
      opacity += .1;
      setTimeout(function(){MyFadeFunction()},100);
   }
   document.getElementById('about').style.opacity = opacity;
}

http://jsfiddle.net/dL02zqku/1/

此示例中

注意 var 不透明度， MyFadeFunction（） 是全局的 ，不是嵌套在启动函数中，而是通过函数调用调用。这样，用于调用函数的jquery库不会保持在闭包状态。

Answer 2

我尝试了Wayne先生的代码，写得很漂亮，但是我试图同时淡化很多东西，并且我可以看到我的浏览器使用他的代码的速度变慢了。在尝试了几种选择之后，我想到了：

function fading(){
    var increment = 0.045;
    var opacity = 0;
    var instance = window.setInterval(function() {
        document.getElementById('about').style.opacity = opacity
        opacity = opacity + increment;
        if(opacity > 1){
            window.clearInterval(instance);
        }
    },100)
}
fading();

您可以在jsfiddle上查看它： https://jsfiddle.net/b12yqo7v/

Answer 3

import React, { Component } from "react";
import { Container, Header, Content, Icon, Picker, Form } from "native-base";
class PickerWithIconStyle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: "key1"
    };
  }
  onValueChange(value: string) {
    this.setState({
      selected: value
    });
  }
  render() {
    return (
      <Container>
        <Header />
        <Content>
          <Form>
            <Picker
              mode="dropdown"
              iosHeader="Select your SIM"
              iosIcon={<Icon name="arrow-dropdown-circle" style={{ color: "#007aff", fontSize: 25 }} />}
              style={{ width: undefined }}
              selectedValue={this.state.selected}
              onValueChange={this.onValueChange.bind(this)}
            >
              <Picker.Item label="Wallet" value="key0" />
              <Picker.Item label="ATM Card" value="key1" />
              <Picker.Item label="Debit Card" value="key2" />
              <Picker.Item label="Credit Card" value="key3" />
              <Picker.Item label="Net Banking" value="key4" />
            </Picker>
          </Form>
        </Content>
      </Container>
    );
  }
}

通过使用Javascript设置不透明度淡入元素

3 个答案: